WPF 项控件和切换按钮奇怪的行为

本文关键字:按钮 控件 WPF | 更新日期: 2024-11-07 12:59:13

我一直在开发WPF应用程序,但是在使用ItemsControl显示带有绑定的切换按钮列表时遇到了一些奇怪的行为。当它显示 1 个元素的集合时,它工作得很好,但是当我有两个元素时,它的行为非常奇怪。如果两个切换按钮处于相同状态(即打开),它不会同时显示它们的图像。

相关的 XAML。我已经检查了后面的属性是否正确更新,但如果有任何需要的代码,请告诉我。

<ItemsControl x:Name="ServiceItemsControl" Grid.Row="0" ItemsSource="{Binding DraftMessage.Services}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ToggleButton IsChecked="{Binding Path=Selected}">
                <ToggleButton.Style>
                    <Style TargetType="ToggleButton">
                        <Setter Property="Focusable" Value="False"/>
                        <!--Setter Property="BorderThickness" Value="0"/-->
                        <Setter Property="Opacity" Value="1"/>
                        <Setter Property="Content">
                            <Setter.Value>
                                <Image Source="{Binding Path=Service.OtherLogo}" Width="25" Height="25"/>
                            </Setter.Value>
                        </Setter>
                        <Style.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Content">
                                    <Setter.Value>
                                        <Image Source="{Binding Path=Service.Logo}" Width="25" Height="25"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>
        </DataTemplate>
    </ItemsControl.ItemTemplate>       
</ItemsControl>

WPF 项控件和切换按钮奇怪的行为

您需要

在更改ToggleButton.IsChecked值时在Image上使用DataTrigger来更改其Source属性。试试这个:

<DataTemplate>
    <ToggleButton IsChecked="{Binding Path=IsSelected}">
        <Image Width="25" Height="25">
            <Image.Style>
                <Style TargetType="{x:Type Image}">
                    <Setter Property="Source" Value="{Binding Service.OtherLogo}" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding IsChecked, 
                            RelativeSource={RelativeSource AncestorType={x:Type 
                            ToggleButton}}}" Value="True">
                            <Setter Property="Source" Value="{Binding Service.Logo}" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Image.Style>
        </Image>
        <ToggleButton.Style>
            <Style TargetType="ToggleButton">
                <Setter Property="Focusable" Value="False"/>
                <!--Setter Property="BorderThickness" Value="0"/-->
                <Setter Property="Opacity" Value="1"/>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>
</DataTemplate>