c# - item - uwp datatemplate

Ocultar o mostrar el panel de distribución de ListViewItem con VisualStateManager

Question

No estoy muy familiarizado con el VisualStateManager en C # UWP, y necesito su ayuda para ocultar o mostrar un panel de pila en mi ListViewItem .

<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Image Height="45" Width="45" Margin="0,8,0,8" Source="../../Assets/ViewBox.png" Stretch="UniformToFill"/>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="8,8,0,0">
<TextBlock Text="Test" Style="{StaticResource BaseTextBlockStyle}" />
<TextBlock Text="test1" Margin="0,4,8,0" Style="{StaticResource BodyTextBlockStyle}" />
</StackPanel>
</StackPanel>
<StackPanel x:Name="EDITOR_PANEL" Grid.Row="1" Orientation="Horizontal" Visibility="Collapsed">
<Button Content="Edit" />
<Button Content="Delete" />
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="EDITOR_PANEL.Visibility" Value="Visible"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>

Lo que quiero hacer es algo como esto:

Cuando selecciono un elemento de mi vista de lista, muestra el EDITOR_PANEL con los dos botones, y si selecciono otro, el elemento seleccionado anterior colapsa y el actual muestra el EDITOR_PANEL y así sucesivamente.

¿Tienes alguna idea?

Answer 1

Una solución es crear un UserControl que contenga todos los controles que desea exponer en su ListViewItem .

Luego, desde el código subyacente, puede actualizar VisualState en el evento ListView SelectionChanged .

Aquí hay una muestra de trabajo:

La vista UserControl :

<UserControl
x:Class="App4.EditablePanel"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
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">
<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Image Height="45" Width="45" Margin="0,8,0,8" Source="../../Assets/ViewBox.png" Stretch="UniformToFill"/>
<StackPanel Orientation="Vertical" VerticalAlignment="Top" Margin="8,8,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource BaseTextBlockStyle}" />
<TextBlock Text="{Binding Headline}" Margin="0,4,8,0" Style="{StaticResource BodyTextBlockStyle}" />
</StackPanel>
</StackPanel>
<StackPanel x:Name="EDITOR_PANEL" Grid.Row="1" Orientation="Horizontal" Visibility="Collapsed">
<Button Content="Edit" />
<Button Content="Delete" />
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
</VisualState>
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Target="EDITOR_PANEL.Visibility" Value="Visible"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</UserControl>

El código de UserControl detrás:

public sealed partial class EditablePanel : UserControl
{
public EditablePanel()
{
this.InitializeComponent();
}
public void SetInEditMode()
{
VisualStateManager.GoToState(this, "Selected", true);
}
public void SetInViewMode()
{
VisualStateManager.GoToState(this, "Normal", true);
}
}

La vista de la página principal:

<Page
x:Class="App4.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App4"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<ListView ItemsSource="{Binding Items}" SelectionChanged="ListView_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<local:EditablePanel></local:EditablePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Page>

El código de MainPage detrás:

public sealed partial class MainPage : Page
{
private List<Item> items;
public MainPage()
{
items = new List<Item>()
{
new Item() { Title = "3D Build", Headline="MS Corp" },
new Item() { Title = "7Zip", Headline="Igor Pavlov" },
new Item() { Title = "Photoshop", Headline = "Adobe"}
};
this.InitializeComponent();
}
public List<Item> Items { get { return items; } }
private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
var lv = sender as ListView;
if (e.RemovedItems.Count > 0)
{
foreach (var item in e.RemovedItems)
{
var container = lv.ContainerFromItem(item) as ListViewItem;
var panel = container.ContentTemplateRoot as EditablePanel;
panel.SetInViewMode();
}
}
if (e.AddedItems.Count > 0)
{
foreach (var item in e.AddedItems)
{
var container = lv.ContainerFromItem(item) as ListViewItem;
var panel = container.ContentTemplateRoot as EditablePanel;
panel.SetInEditMode();
}
}
}
}
public class Item
{
public string Title { get; set; }
public string Headline { get; set; }
}