Question

我有一个带SelectionMode = None的ListView。当我将其更改为Multiple时，我希望列表中的项目更改其样式并在每个项目周围添加边框，以便用户知道他可以选择它们（请参阅图像）。我正在使用MVVMLight，所以如果可以，请以VM方式提供帮助。无论如何，任何解决方案都会受到赞赏。 enter image description here

enter image description here

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 visual state manager in item template (WinRT, Metro, XAML)

Binding [VisualStateManager] view state to a MVVM viewmodel?

希望这可以帮助将来的任何人：）

当SelectionMode设置为Multiple时，更改ListViewItems样式

1 个答案: