當SelectionMode設置為Multiple時，更改ListViewItems樣式

Question

我有一個ListView， SelectionMode = None 。 當我將其更改為Multiple我希望列表中的項目更改其樣式並在每個項目周圍添加邊框，以便用戶知道他可以選擇它們（請參閱圖像）。 我正在使用MVVMLight，所以如果可以，請以VM方式提供幫助。 無論如何，任何解決方案都會受到贊賞。

Answer 1

好吧，這里的問題與訪問我的ListView中的每個元素的可視狀態有關，因此用戶可以看到如何與那些ListView項目進行交互。 怎么做：

首先，創建ListViewItem模板的副本並添加您的custon VisualStates：

<Style TargetType="ListViewItem" x:Key="ListViewItemExpanded">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,18,2"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="ListViewItem">
            <Border x:Name="OuterContainer">
                <VisualStateManager.VisualStateGroups>
                    <!-- Custom Visual States -->
                    <VisualStateGroup x:Name="CustomStates">
                        <VisualState x:Name="Edicion">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="SelectedBorder"
                                    Storyboard.TargetProperty="Opacity" Duration="0" To="1" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="SoloLectura">
                            <Storyboard>
                                <FadeOutThemeAnimation TargetName="SelectedBorder" />
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    ...

其次，為ListView中的de <DataTemplate>內的內容創建一個UserControl：

<UserControl
    x:Class="YourNamespace.YourUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    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 x:Name="GridUC">
        <TextBlock Text="{Binding Path=BindToVMProp}" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" />
    </Grid>
</UserControl>

第三，在UserControl（“CustomState”）中添加一個自定義屬性，您可以在其中指定要設置的VisualState的名稱，並實現將其應用於UserControl的代碼后面的邏輯。

public sealed partial class MyUserControl : UserControl
{
    public static DependencyProperty CustomStateProperty = DependencyProperty.Register(
        "CustomState",
        typeof(string),
        typeof(MyUserControl),
        new PropertyMetadata("SoloLectura", CustomStatePropertyChangedCallback));

    public string Estado
    {
        get
        {
            return (string)this.GetValue(CustomStateProperty);
        }
        set
        {
            this.SetValue(CustomStateProperty, value);
        }
    }

    static void CustomStatePropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var item = GetPadre(d as MyUserControl);
        VisualStateManager.GoToState(item, e.NewValue.ToString(), true);
    }

    /// <summary>
    /// Gets the listviewitem parent.
    /// </summary>
    private static ListViewItem GetPadre(FrameworkElement elemento)
    {
        while (elemento != null)
        {
            elemento = VisualTreeHelper.GetParent(elemento) as FrameworkElement;
            if (elemento is ListViewItem)
                break;
        }
        return elemento as ListViewItem;
    }

    public FavoritoControl()
    {
        this.InitializeComponent();
    }
}

第四，在UserControl所在的視圖中，綁定VM中的自定義屬性，並在需要時將其設置為UserControl：

xmlns:local="using:YourNamespace"
<ListView x:Name="MyList" ItemsSource="{Binding CollectionProp}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:MyUserControl CustomState="{Binding Path=DataContext.CustomVisualSateProp, ElementName=MyList}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

在哪里我找到了答案：

項目模板中的listview可視狀態管理器（WinRT，Metro，XAML）

將[VisualStateManager]視圖狀態綁定到MVVM視圖模型？

希望這有助於未來的任何人:)