Свернуть расширитель, когда один элемент списка находится в open- Windows uwp

ProgramBox

Свернуть расширитель, когда один элемент списка находится в open- Windows uwp

Post author:admin
Запись опубликована:2 марта, 2023
Post category:Вопросы по программированию

#c# #xaml #win-universal-app #windows-10-universal

#c# #xaml #win-universal-app #windows-10-универсальный

Вопрос:

Я использую панель расширения для расширения / свертывания списка.

Моя проблема в том, что одновременно только один элемент находится только в развернутом состоянии. В моем случае, если я разворачиваю один элемент без сворачивания и разворачиваю другой элемент, то оба элемента списка находятся только в развернутом состоянии, предыдущий расширенный элемент не свернулся.

Обратитесь к изображению. Если вы видите изображение, все 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) amp;amp; (_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>

Как свернуть один элемент, если я нажму на другой элемент.
Любая помощь будет высоко оценена.
Спасибо.

1. Вы имеете в виду, что хотите, чтобы на странице была открыта только одна панель расширения (другие панели расширения будут закрыты автоматически)? Не могли бы вы поделиться демонстрацией или опубликовать коды Xaml вашего usercontrol (ExpandPanel)?

2. да, точно. Только одна панель расширения должна быть открыта один раз, а другие должны быть закрыты автоматически. И я поделился своим кодом в вопросе, который я использую.

3. Я имею в виду коды xaml вашей ExpandPanel. Я предполагаю, что это UserControl или шаблонный пользовательский элемент управления, верно? И для этого для него должны быть коды xaml. Но я вижу только коды xaml, которые используют ваш элемент управления.

4. я использую пользовательский элемент управления в своем коде xaml, например local:ExpandPanel. Больше я ничего не использую.

5. извините @ElvisXia-MSFT, я отредактировал свой вопрос с помощью пользовательского управляющего кода xaml. Пожалуйста, ознакомьтесь с этим.

Ответ №1:

Как свернуть один элемент, если я нажму на другой элемент. Любая помощь будет высоко оценена.

Самый простой способ — зарегистрировать ExpandStateChanged событие для вашего пользовательского элемента управления и свернуть другое ExpandPanel , когда любое ExpandPanel расширяется.

Для достижения этой цели вы можете выполнить следующие действия:

Зарегистрируйте ExpandStateChanged событие в своем пользовательском элементе управления и вызовите событие в IsExpanded установщике (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);
            }
        }
    }
}

Закодируйте обработчик событий в code-behind (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;
        }
    }
}

Зарегистрируйте обработчик ExpandStateChanged="ExpandStateChangedHandler" событий в Xaml (MainPage.xaml):

 <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

Вопрос:

Комментарии:

Ответ №1:

Вам также может понравиться

Управляемый данными тест Spock

Невозможно получить доступ к местоположению на устройстве Android (доступ запрещен, код ошибки 3, поставщик местоположения недоступен)

Удаление повторяющихся целых чисел в python