在 DataTemplate UWP 中绑定 ComboBoxItem 的 IsSelected 属性

2023-12-09

我正在尝试绑定 ComboBoxItem 的属性 IsSelected 以显示正确的图标,如果选择了项目,则应显示红色图标,否则打开列表的其余部分为灰色。我如何尝试实现该功能的方式如下面的代码所示。

<ComboBox
    ItemsSource="{Binding Icons}"
    SelectedItem="{Binding SelectedIcon, Mode=TwoWay}"
    Style="{ThemeResource DefaultComboBoxStyle}"
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                    <Image
                        Width="20"
                        Height="20"
                        Source="{Binding IconId, Mode=TwoWay, Converter={StaticResource IconConverter}, ConverterParameter={StaticResource True}}"
                        Visibility="{Binding Path=IsSelected,RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}" />
                    <Image
                        Width="20"
                        Height="20"
                        Source="{Binding IconId, Mode=TwoWay, Converter={StaticResource IconConverter}}"
                        Visibility="{{Binding Path=IsSelected,RelativeSource={RelativeSource Mode=TemplatedParent} Converter={StaticResource BoolToVisibilityInverted}}" />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

两个图像转换器的项目图标 ID 相同,将根据传递的参数返回正确的图像链接。我尝试获取父数​​据上下文并尝试使用comboBoxItem (SelectorItem) 的IsSelected 属性,但它不起作用。

我不想在我迭代的 ViewModel 中添加 IsSlected 属性,我假设存在一些语法,但我找不到它。我只想获取 IsSelected 属性的值并绑定到 xaml 中,而无需更改 ViewModel 中的代码。

类似下面代码中的东西是实现的,但是是硬编码的元素。根据 ComboBoxItem 的 IsSelected 项目属性,显示正确的图标。我想要使​​用 ItemsSource 和 DataTemplate 获得相同的功能。

 <ComboBox
    SelectedIndex="{Binding IconType, Mode=TwoWay, Converter={StaticResource IconTypeIndexToIconConverter}}"
    Style="{ThemeResource DefaultComboBoxStyle}">
    <ComboBoxItem x:Name="SwitchIcon">
        <StackPanel Orientation="Horizontal">
                <Image
                    Source="{Binding Source=1, Converter={StaticResource IconConverter}}"
                    Style="{ThemeResource DeviceTypeImageBlockStyle}"
                    Visibility="{Binding IsSelected, ElementName=SwitchIcon, Converter={StaticResource BoolToVisibilityInverted}}" />
                <Image
                    Source="{Binding Source=1, Converter={StaticResource IconConverter}, ConverterParameter={StaticResource True}}"
                    Style="{ThemeResource DeviceTypeImageBlockStyle}"
                    Visibility="{Binding IsSelected, ElementName=SwitchIcon, Converter={StaticResource BoolToVisibilityConverter}}" />
        </StackPanel>
    </ComboBoxItem>
    <ComboBoxItem x:Name="LightDimmingIcon">
        <StackPanel Orientation="Horizontal">
                <Image
                    Source="{Binding Source=2, Converter={StaticResource IconConverter}}"
                    Style="{ThemeResource DeviceTypeImageBlockStyle}"
                    Visibility="{Binding IsSelected, ElementName=LightDimmingIcon, Converter={StaticResource BoolToVisibilityInverted}}" />
                <Image
                    Source="{Binding Source=2, Converter={StaticResource IconConverter}, ConverterParameter={StaticResource True}}"
                    Style="{ThemeResource DeviceTypeImageBlockStyle}"
                    Visibility="{Binding IsSelected, ElementName=LightDimmingIcon, Converter={StaticResource BoolToVisibilityConverter}}" />
        </StackPanel>
    </ComboBoxItem>
</ComboBox>

有任何想法吗?解决方案?


在 DataTemplate UWP 中绑定 ComboBoxItem 的 IsSelected 属性

恐怕你无法绑定IsSelected的财产ComboBoxItem in DataTemplateUWP。因为 TemplatedParentrelativeSource 是ContentPresenter但不是ComboBoxItem,你可以使用下面的xaml来验证。

<ComboBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Border DataContext="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}}">
                <TextBlock x:Name="Print" Text="{Binding}"/>
            </Border>
            <TextBlock Text="{Binding}" />
        </StackPanel>
    </DataTemplate>
</ComboBox.ItemTemplate>

它将显示Windows.UI.Controls.ContentPresenter in Print文本块。

我不想在我迭代的 ViewModel 中添加 IsSlected 属性,我假设存在一些语法,但我找不到它。

一般来说,我们通过添加来处理该场景IsSlected进入模型类。并获取选择项修改IsSelected值以影响UI。我在下面制作了完整的样本。

代码隐藏

public sealed partial class MainPage : Page, INotifyPropertyChanged
{
    public List<CBContent> Items { get; set; } = new List<CBContent>();
    public MainPage()
    {
        this.InitializeComponent();
        Items.Add(new CBContent { Content = "Item1", IsSelected = false });
        Items.Add(new CBContent { Content = "Item2", IsSelected = false });
        Items.Add(new CBContent { Content = "Item3", IsSelected = false });
        Items.Add(new CBContent { Content = "Item4", IsSelected = false });
        Items.Add(new CBContent { Content = "Item5", IsSelected = false });
        Items.Add(new CBContent { Content = "Item6", IsSelected = false });
        this.DataContext = this;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    private CBContent _selectItem;

    private CBContent _previousSelectItem;
    public CBContent SelectItem
    {
        get
        {
            return _selectItem;
        }
        set
        {
            _selectItem = value;              
            value.IsSelected = true;
            if(_previousSelectItem != null)
            {
                _previousSelectItem.IsSelected = false;
            }
            _previousSelectItem = _selectItem;
            OnPropertyChanged();               
        }
    }
}
public class CBContent : INotifyPropertyChanged
{
    public string Content { get; set; }
    private bool _isSelect;
    public bool IsSelected
    {
        get
        {
            return _isSelect;
        }
        set
        {
            _isSelect = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

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

Xaml

<Grid>
    <ComboBox ItemsSource="{Binding Items, Mode=OneWay}" SelectedItem="{Binding SelectItem,Mode=TwoWay}">
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">

                    <Rectangle
                        Width="20"
                        Height="20"
                        Fill="Red"
                        Visibility="{Binding IsSelected, Mode=TwoWay}"
                        />
                    <TextBlock Text="{Binding Content}" />
                </StackPanel>

            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>
</Grid>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 DataTemplate UWP 中绑定 ComboBoxItem 的 IsSelected 属性 的相关文章

随机推荐