c# - wpf dock

cómo hacer un stackpanel contraíble en Xaml

Question

Mi idea es bastante simple y la he visto en muchos lugares. Quiero poder expandir y contratar una lista de elementos en función de un clic en un botón.

ex

• listitem 1
• listitem 2
  • Sublista elemento 1
  • Sublista elemento 2
• listItem 3

simplemente haga clic en Listitem 2 y los elementos de la lista secundaria desaparecerán. haga clic de nuevo o cualquier otro elemento de lista y el elemento de la lista secundaria que pertenece a ese elemento de lista debe reaparecer.

esto es lo que hice hasta ahora (No funciona)

Channels.Xaml:

<UserControl
x:Class="InternetRadio.RadioChannels"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:InternetRadio"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<StackPanel x:Name="stationList" Orientation="Vertical">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_click"/>
<TextBlock x:Name="textBox" Text="Internet Radio Stations" Padding="50,0,0,0" Height="20px" />
<ToggleButton x:Name="collapsableBtn" Content="DR Channels" Margin="50,0,0,0" Background="Transparent" Click="collapsableBtn_Click" />
<StackPanel x:Name="RadioChannelsCollapsable" Visibility="Collapsed">
<ItemsControl x:Name="tStack" Grid.Column="1" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding ItemName}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>

Channels.xaml.cs

private void collapsableBtn_Click(object sender, RoutedEventArgs e)
{
if(RadioChannelsCollapsable.Visibility == Visibility.Collapsed)
{
RadioChannelsCollapsable.Visibility = Visibility.Visible;
RadioChannelsCollapsable.Children.ToList().ForEach(vis => vis.Visibility = Visibility.Visible);
}
else
{
RadioChannelsCollapsable.Visibility = Visibility.Collapsed;
RadioChannelsCollapsable.Children.ToList().ForEach(vis => vis.Visibility = Visibility.Collapsed);
}

solo para que quede claro que este control de usuario se usa así en una vista dividida: mainpage.xaml

<SplitView x:Name="radioChannelssplitview" DisplayMode="CompactOverlay" IsPaneOpen="False" CompactPaneLength="50" OpenPaneLength="250">
<SplitView.Pane>
<local:RadioChannels x:Name="myControl" Background="Gray"/>
</SplitView.Pane>
<SplitView.Content>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock x:Name="StationTitle" Text="Internet Radio" HorizontalAlignment="Center" VerticalAlignment="Top" Height="20px" />
<TextBlock x:Name="ProgramTitle" Text="Welcome Page" HorizontalAlignment="Center" VerticalAlignment="Top" Height="20px" Margin="130,60,140,560" />
</Grid>
</SplitView.Content>
</SplitView>
}

y no puedo hacer que funcione :( la vista dividida se abre y cierra fácilmente, pero el panel de distribución no se expande ni se contrae en absoluto. Por favor, denme un puntero a dónde o por qué me equivoco y / o un indicador de cómo debería estar haciendo esto . Gracias por adelantado

Answer 1

Prefiero tratar de crear mi propio UserControl que se puede expandir o no dependiendo de su VisualState. Mi muestra rápida y simple:

MainPage.xaml:

<Page.Resources>
<DataTemplate x:Key="MyItemTemplate">
<local:MyItem></local:MyItem>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{Binding Items}" ItemTemplate="{StaticResource MyItemTemplate}"
SelectionMode="None" IsItemClickEnabled="True">
</ListView>
</Grid>

MainPage.xamls.cs:

public sealed partial class MainPage : Page
{
public MainPage()
{
InitializeComponent();
DataContext = new ViewModel();
}
}

ViewModel.cs:

public class ViewModel
{
public ViewModel()
{
Items.Add(new MyItemViewModel("Item1"));
Items.Add(new MyItemViewModel("Item2"));
Items.Add(new MyItemViewModel("Item3"));
}
public ApplicationDataLocality ApplicationDataLocalityEnum { get; } =
ApplicationDataLocality.Local;
public FontStyle FontStyleEnum { get; } =
FontStyle.Normal;
public ObservableCollection<MyItemViewModel> Items { get; set; } = new ObservableCollection<MyItemViewModel>();
}

MyItem.xaml.cs:

<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Title}" x:Name="TitleBlock" Tapped="Title_OnTapped"/>
<ListView ItemsSource="{Binding Items}" x:Name="ItemsBlock" ItemClick="Items_OnItemClick" IsItemClickEnabled="True"/>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Regular">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsBlock" Storyboard.TargetProperty="Visibility" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Expanded">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsBlock" Storyboard.TargetProperty="Visibility" >
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</StackPanel>

MyItem.xaml.cs:

public enum MyItemState
{
Regular,
Expanded
}
public sealed partial class MyItem : UserControl
{
private MyItemState _state;
public MyItemState State
{
get { return _state; }
set
{
_state = value;
VisualStateManager.GoToState(this, _state.ToString(), true);
}
}
public MyItem()
{
InitializeComponent();
State = MyItemState.Regular;
}
private void Title_OnTapped(object sender, TappedRoutedEventArgs e)
{
if (State == MyItemState.Regular)
{
State = MyItemState.Expanded;
}
else
{
State = MyItemState.Regular;
}
}
private void Items_OnItemClick(object sender, ItemClickEventArgs e)
{
// action after subitem is clicked
}
}

y MyItemViewModel:

public class MyItemViewModel
{
public ObservableCollection<TextBlock> Items { get; set; } = new ObservableCollection<TextBlock>();
public string Title { get; set; }
public MyItemViewModel(string title)
{
Title = title;
Items.Add(new TextBlock() { Text = "SubItem1" });
Items.Add(new TextBlock() { Text = "SubItem2" });
Items.Add(new TextBlock() { Text = "SubItem3" });
}
}

cada vez que haga clic en el título de MyItem, cambiará su estado: expandir o reducir sus subítems (solo TextBoxes para simplificar) mediante otro UserControl con la vista que desee) que en este caso almaceno en otro ListView. Tarea: cambie los estilos y las animaciones para que el cambio de estado se vea mejor y así sucesivamente.