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; }
}