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

Question

我正在使用扩展面板 expand/collapse 列表。

我的问题是，一次只有一个项目处于展开状态。在我的例子中，如果我在不折叠的情况下展开一个项目并展开其他项目，那么两个列表项目都仅处于展开状态，之前展开的项目没有折叠。

参考图像。如果您看到图像，所有 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

How to collapse one item if i click on other item. Any help will be highly appreciated.

最简单的方法是为您的自定义控件注册一个 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) 中注册事件处理程序 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

Collapse expander, when one list item is in open- Windows uwp

c#

xaml

win-universal-app

windows-10-universal