如果在UWP中選擇了更改ListBox項目的DataTemplate

Question

在UWP Xaml中，我有一個ListView。 在ListView中，我將DataTemplate與堆棧面板一起使用，當selectedItem為True時，我想更改stackpanel的背景顏色我想在Xaml中進行操作

換句話說，

如果選擇了更改Listview項目的DataTemplate，我想在Xaml中進行操作

Xaml中的代碼：

<ListView.ItemTemplate >
    <DataTemplate x:Name="mydt">

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="40" />
            </Grid.ColumnDefinitions>
            <StackPanel x:Name="MyStack">
                <ContentControl Content="{Binding rtb}"
                                q:APGolAyah.MyProperty="{Binding AyahNo}" />                           
                <TextBlock Text="{Binding Text}"
                           TextWrapping="Wrap" />

            </StackPanel>
            <Image Grid.Column="1"
                   Source="{Binding HezbNo,Converter={StaticResource HezbNoToIconConverter}}"
                   Width="25" />
        </Grid>
    </DataTemplate>
</ListView.ItemTemplate>

Answer 1

如您Style.Triggers ，在UWP Style.Triggers中無法使用Style.Triggers ，並且我了解您想純粹在xaml中完成這項工作，但是遺憾的是，現在還沒有這種純粹的方法。

由於您只想在選擇該項時更改StackPanel的背景色，我認為不需要更改整個DataTemplate ，我在這里寫答案以介紹一種使用Converter進行數據綁定和一些操作的方法在這里使用c＃代碼，因為您可能對此方法感興趣。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.Resources>
        <local:BoolToBrushConverter x:Key="cvt" />
    </Grid.Resources>
    <ListView x:Name="listview" ItemsSource="{x:Bind Collection, Mode=OneWay}"
              SelectionChanged="listview_SelectionChanged">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="40" />
                    </Grid.ColumnDefinitions>
                    <StackPanel Background="{Binding IsSelected, Converter={StaticResource cvt}}">
                        <TextBlock Text="{Binding Name}" />
                    </StackPanel>
                    <TextBlock Grid.Column="1" Text="{Binding Age}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</Grid>

后面的代碼和數據模型：

private ObservableCollection<Model> Collection = new ObservableCollection<Model>();

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    for (int i = 0; i < 50; i++)
    {
        Collection.Add(new Model { Name = "Name " + i + ", ", Age = i });
    }
}

private void listview_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    foreach (Model item in e.AddedItems)
    {
        item.IsSelected = true;
    }
    foreach (Model item in e.RemovedItems)
    {
        item.IsSelected = false;
    }
}

public class Model : INotifyPropertyChanged
{
    public string Name { get; set; }
    public int Age { get; set; }

    private bool _IsSelected;

    public bool IsSelected
    {
        get { return _IsSelected; }
        set
        {
            if (value != _IsSelected)
            {
                _IsSelected = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged([CallerMemberName]string propertyName = "")
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

轉換器：

public class BoolToBrushConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        bool? b = (bool?)value;
        if (b == true)
            return new SolidColorBrush(Colors.BlueViolet);
        return new SolidColorBrush(Colors.Transparent);
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

並且，如果您還想更改DataTemplate ，則可以在另一種情況下參考我的回答： UWP ListView：如何在選擇項目時擴展它？ 。