WPF ItemsControl 和 Togglebuttons 奇怪的行为

Question

我一直在开发 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>

Answer 1

您需要在 Image 上使用 DataTrigger 来更改其 Source 属性，而 ToggleButton.IsChecked 值已更改。试试这个：

<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>

WPF ItemsControl 和 Togglebuttons 奇怪的行为

WPF ItemsControl and Togglebuttons weird behaviour

c#

wpf

itemscontrol

togglebutton