WPF изменение изображения в шаблоне кнопки

#c# #wpf

#c# #wpf

Вопрос:

Я пытаюсь создать шаблон кнопки, в котором изменяется содержимое изображения кнопки. Тем не менее, я не получаю никакого изображения, отображаемого вообще со следующим кодом. Что я делаю не так? Установка стиля непосредственно на странице xaml работает нормально.

 <Style x:Key="NetworkConnectivity" TargetType="Button">
    <Setter Property="Width" Value="120"/>
    <Setter Property="Height" Value="120"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Opacity" Value="0.7"/>
    <Setter Property="BorderThickness" Value="0"/>

    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <Image Width="50">
                    <Image.Style>
                        <Style>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding NetConfig}" Value="false">
                                    <Setter Property="Image.Source" Value="/images/Unconfigured.png"/>
                                </DataTrigger>
                                <DataTrigger Binding="{Binding NetConfig}" Value="true">
                                    <Setter Property="Image.Source" Value="/images/Disconnected.png"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>
 

Комментарии:

1. Имейте в виду, что ContentTemplate и Template — это разные вещи.

2. Попробуйте также привязать изображение вне (до) триггеров. Бывают случаи, когда вы получаете такое поведение, когда забываете состояние по умолчанию. Может быть связано с расширением представления.

Ответ №1:

Не точное решение, а альтернатива. Ниже приведен отрывок из моей работы, в котором показано, как переключать изображения для кнопок на основе триггеров. Вместо стиля я использую usercontrol, который используется повторно. Привязанные данные являются свойствами зависимостей. Вы можете использовать триггер данных. В вашем случае назначьте два изображения, сделайте одно свернутым и при запуске переключите свернуть.

 <UserControl x:Class="ParameterModule.Base.Controls.ButtonWImage"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:ParameterModule.Base.Controls"
         mc:Ignorable="d" 
         x:Name="UctrlButtonWImage"
         d:DesignHeight="100" d:DesignWidth="100">

<Button Click="Button_Click" CommandParameter="{Binding CommandParameter, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ButtonWImage}}}" Command="{Binding Command, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ButtonWImage}}}" Cursor="Hand" >
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <StackPanel>
                <Image x:Name="PrimaryImage" Source="{Binding PrimaryImage, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ButtonWImage}}}" Visibility="Visible" Stretch="UniformToFill" StretchDirection="Both"/>
                    <Image x:Name="SecondaryImage" Source="{Binding HoverImage, NotifyOnSourceUpdated=True, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:ButtonWImage}}}" Visibility="Collapsed" Stretch="UniformToFill" StretchDirection="Both"/>
                </StackPanel>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="PrimaryImage" Property="Visibility" Value="Collapsed"/>
                        <Setter TargetName="SecondaryImage" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>
</UserControl>