Question

我正在使用展开式面板展开/折叠列表。

我的问题是，一次只有一个项目只处于展开状态。在我的情况下，如果我展开一个项目而没有折叠，我展开其他项目，那么两个列表项目仅处于展开状态，之前的展开项目没有，t崩溃。

参考图片。如果您看到图像，则所有3个项目仅处于展开状态。没有自动崩溃

这是我的代码：

ExpandPanel.cs：

public ExpandPanel()
        {
            this.DefaultStyleKey = typeof(ExpandPanel);
        }

        private bool _useTransitions = true;
        private VisualState _collapsedState;
        public Windows.UI.Xaml.Controls.Primitives.ToggleButton toggleExpander;
        private FrameworkElement contentElement;

        public static readonly DependencyProperty HeaderContentProperty =
        DependencyProperty.Register("HeaderContent", typeof(object),
        typeof(ExpandPanel), null);

        public static readonly DependencyProperty IsExpandedProperty =
        DependencyProperty.Register("IsExpanded", typeof(bool),
        typeof(ExpandPanel), new PropertyMetadata(true, IsExpanded_Changed));

        public static readonly DependencyProperty CornerRadiusProperty =
        DependencyProperty.Register("CornerRadius", typeof(CornerRadius),
        typeof(ExpandPanel), null);

        public object HeaderContent
        {
            get { return GetValue(HeaderContentProperty); }
            set { SetValue(HeaderContentProperty, value); }
        }

        public bool IsExpanded
        {
            get { return (bool)GetValue(IsExpandedProperty); }
            set { SetValue(IsExpandedProperty, value); }
        }

        public CornerRadius CornerRadius
        {
            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
            set { SetValue(CornerRadiusProperty, value); }
        }

        private static void IsExpanded_Changed(DependencyObject sender, DependencyPropertyChangedEventArgs args)
        {
            var panel = (ExpandPanel)sender;
            panel.changeVisualState(false);
        }

        public void changeVisualState(bool useTransitions)
        {
            if (IsExpanded)
            {
                if (contentElement != null)
                {
                    contentElement.Visibility = Visibility.Visible;
                }
                VisualStateManager.GoToState(this, "Expanded", useTransitions);
            }
            else
            {
                VisualStateManager.GoToState(this, "Collapsed", useTransitions);
                _collapsedState = (VisualState)GetTemplateChild("Collapsed");
                if (_collapsedState == null)
                {
                    if (contentElement != null)
                    {
                        contentElement.Visibility = Visibility.Collapsed;
                    }
                }
            }
        }

        protected override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            toggleExpander = (Windows.UI.Xaml.Controls.Primitives.ToggleButton)
                GetTemplateChild("ExpandCollapseButton");
            if (toggleExpander != null)
            {
                toggleExpander.Click += (object sender, RoutedEventArgs e) =>
                {
                    IsExpanded = !IsExpanded;
                    toggleExpander.IsChecked = IsExpanded;
                    changeVisualState(_useTransitions);
                };
            }
            contentElement = (FrameworkElement)GetTemplateChild("Content");
            if (contentElement != null)
            {
                _collapsedState = (VisualState)GetTemplateChild("Collapsed");
                if ((_collapsedState != null) && (_collapsedState.Storyboard != null))
                {
                    _collapsedState.Storyboard.Completed += (object sender, object e) =>
                    {
                        contentElement.Visibility = Visibility.Collapsed;
                    };
                }
            }
            changeVisualState(false);
        }

xaml代码：

<Grid Grid.Row="2">
                                    <Border BorderThickness="2" BorderBrush="White" Background="Black" Margin="5,5,5,0" CornerRadius="5">
                                        <local:ExpandPanel x:Name="weekExpandPanel" HeaderContent="வார பலன்கள்" Foreground="White" Margin="10,0,0,0" IsExpanded="False" FontWeight="ExtraBold">
                                            <local:ExpandPanel.Content>
                                                <TextBlock x:Name="weekAstrology" TextWrapping="Wrap" FontWeight="Normal"></TextBlock>
                                            </local:ExpandPanel.Content>
                                        </local:ExpandPanel>
                                    </Border>
                                </Grid>

                                <Grid Grid.Row="3">
                                    <Border BorderThickness="2" BorderBrush="White" Background="Black" Margin="5,5,5,0" CornerRadius="5">
                                        <local:ExpandPanel x:Name="monthExpandPanel" HeaderContent="தமிழ் மாத ஜோதிடம்" Foreground="White" Margin="10,0,0,0" IsExpanded="False" FontWeight="ExtraBold">
                                            <local:ExpandPanel.Content>
                                                <TextBlock x:Name="monthlyAstrology" TextWrapping="Wrap" FontWeight="Normal"></TextBlock>
                                            </local:ExpandPanel.Content>
                                        </local:ExpandPanel>
                                    </Border>
                                </Grid>

                                <Grid Grid.Row="4">
                                    <Border BorderThickness="2" BorderBrush="White" Background="Black" Margin="5,5,5,0" CornerRadius="5">
                                        <local:ExpandPanel x:Name="yearExpandPanel" HeaderContent="ஆண்டு பலன்" Foreground="White" Margin="10,0,0,0" IsExpanded="False" FontWeight="ExtraBold">
                                            <local:ExpandPanel.Content>
                                                <TextBlock x:Name="yearlyAstrology" TextWrapping="Wrap" FontWeight="Normal"></TextBlock>
                                            </local:ExpandPanel.Content>
                                        </local:ExpandPanel>
                                    </Border>
                                </Grid>

.cs文件：

weekAstrology.Text= "test";

monthlyAstrology.Text= "test1";
yearlyAstrology.Text= rootObject["ZodiacSignDetails"][0]["Astrotextyearly"].ToString();

我的自定义控件的xaml代码：

<Style TargetType="local:ExpandPanel" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:ExpandPanel">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ViewStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0:0:0.5"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                    Storyboard.TargetProperty="ScaleY" To="1" Duration="0"/>
                                        <DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                    Storyboard.TargetProperty="Angle" To="180" Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Collapsed">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="ContentScaleTransform"
                    Storyboard.TargetProperty="ScaleY" To="0" Duration="0"/>
                                        <DoubleAnimation Storyboard.TargetName="RotateButtonTransform"
                    Storyboard.TargetProperty="Angle" To="0" Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
    BorderThickness="{TemplateBinding BorderThickness}"
    CornerRadius="{TemplateBinding CornerRadius}"
    Background="{TemplateBinding Background}">
                            <Grid>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid Margin="3">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>
                                    <ContentPresenter Grid.Column="0" VerticalAlignment="Center" Content="{TemplateBinding HeaderContent}" FontSize="16"/>
                                    <ToggleButton Grid.Column="1" RenderTransformOrigin="0.5,0.5" x:Name="ExpandCollapseButton">
                                        <ToggleButton.Template>
                                            <ControlTemplate>
                                                <Grid>
                                                    <Ellipse Width="35" Height="35" Fill="{ThemeResource ToggleSwitchCurtainBackgroundThemeBrush}" Margin="0,0,0,0"/>
                                                    <Path RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center"
                                Data="M2,3L9,10 16,3" Stroke="{ThemeResource ToggleButtonCheckedForegroundThemeBrush}" StrokeThickness="4" Margin="0,0,0,0"/>
                                                </Grid>
                                            </ControlTemplate>
                                        </ToggleButton.Template>
                                        <ToggleButton.RenderTransform>
                                            <RotateTransform x:Name="RotateButtonTransform"/>
                                        </ToggleButton.RenderTransform>
                                    </ToggleButton>
                                </Grid>
                                <ContentPresenter Grid.Row="1" Margin="5" Content="{TemplateBinding Content}" x:Name="Content">
                                    <ContentPresenter.RenderTransform>
                                        <ScaleTransform x:Name="ContentScaleTransform"/>
                                    </ContentPresenter.RenderTransform>
                                </ContentPresenter>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

如果我点击其他项目，如何折叠一个项目。任何帮助将受到高度赞赏。谢谢。

Answer 1

如果我点击其他项目，如何折叠一个项目。任何帮助将受到高度赞赏。

最简单的方法是为自定义控件注册ExpandStateChanged事件，并在任何ExpandPanel扩展时折叠其他ExpandPanel。

您可以按照以下步骤实现此目的：

在自定义控件中注册ExpandStateChanged事件，并在IsExpanded的Setter（ExpandPanel.cs）中调用该事件：

public sealed class ExpandPanel : ContentControl
{
   public event EventHandler ExpandStateChanged;
   ...
   public bool IsExpanded
   {
        get { return (bool)GetValue(IsExpandedProperty); }
        set
        {
            SetValue(IsExpandedProperty, value);
            if (ExpandStateChanged != null)
            {
                ExpandStateChanged(this,null);
            }
        }
    }
}

在代码隐藏中编码EventHandler（MainPage.xaml.cs）：

private void ExpandStateChangedHandler(object sender, EventArgs e)
{
    var currentPanel = (ExpandPanel)sender;
    if (currentPanel.IsExpanded == false)
    {
        return;
    }
    foreach(var panel in panels)
    {
        if (panel.Name != currentPanel.Name)
        {
            panel.IsExpanded = false;
        }
    }
}

在Xaml（MainPage.xaml）中注册EventHandler ExpandStateChanged="ExpandStateChangedHandler"：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="1*"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
    <Border BorderThickness="2" BorderBrush="White" Background="Black" Margin="5,5,5,0" CornerRadius="5">
        <local:ExpandPanel x:Name="weekExpandPanel" HeaderContent="This is Header" Foreground="White" Margin="10,0,0,0" IsExpanded="False" FontWeight="ExtraBold" ExpandStateChanged="ExpandStateChangedHandler">
            <local:ExpandPanel.Content>
                <TextBlock x:Name="weekAstrology" TextWrapping="Wrap" FontWeight="Normal"></TextBlock>
            </local:ExpandPanel.Content>
        </local:ExpandPanel>
    </Border>
</Grid>

<Grid Grid.Row="1">
    <Border BorderThickness="2" BorderBrush="White" Background="Black" Margin="5,5,5,0" CornerRadius="5">
        <local:ExpandPanel x:Name="monthExpandPanel" HeaderContent="தமிழ் மாத ஜோதிடம்" Foreground="White" Margin="10,0,0,0" IsExpanded="False" FontWeight="ExtraBold" ExpandStateChanged="ExpandStateChangedHandler">
            <local:ExpandPanel.Content>
                <TextBlock x:Name="monthlyAstrology" TextWrapping="Wrap" FontWeight="Normal"></TextBlock>
            </local:ExpandPanel.Content>
        </local:ExpandPanel>
    </Border>
</Grid>

<Grid Grid.Row="2">
    <Border BorderThickness="2" BorderBrush="White" Background="Black" Margin="5,5,5,0" CornerRadius="5">
        <local:ExpandPanel x:Name="yearExpandPanel" HeaderContent="ஆண்டு பலன்" Foreground="White" Margin="10,0,0,0" IsExpanded="False" FontWeight="ExtraBold" ExpandStateChanged="ExpandStateChangedHandler">
            <local:ExpandPanel.Content>
                <TextBlock x:Name="yearlyAstrology" TextWrapping="Wrap" FontWeight="Normal"></TextBlock>
            </local:ExpandPanel.Content>
        </local:ExpandPanel>
    </Border>
</Grid>

结果如下：

以下是完整示例：ExpandCollapseSample

当一个列表项处于打开状态时，折叠展开器 - Windows uwp

1 个答案: