Блог

Я хотел создать кнопку переключения, которая содержит два серых зубчатых колеса, когда она не отмечена, и два красных вращающихся зубца, когда она нажата. Я создал шаблон с триггерами, которые проверяют свойство IsChecked и соответствующим образом настраивают содержимое кнопки.

Кажется, что все работает просто отлично, но как только я добавляю две кнопки на страницу, первая кажется пустой (без изображений). Похоже, что одновременно можно включать или выключать только одну кнопку.

Что я делаю не так?

 <SolidColorBrush x:Key="CogwheelButton.Border.Color" Color="Transparent"/>
<SolidColorBrush x:Key="CogwheelButton.Background.Color" Color="Transparent"/>

<Style x:Key="CogwheelButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="{StaticResource CogwheelButton.Background.Color}"/>
    <Setter Property="BorderBrush" Value="{StaticResource CogwheelButton.Border.Color}"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border x:Name="border" Background="{TemplateBinding Background}" BorderThickness="0" BorderBrush="Transparent">
                    <Grid>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Control.Visibility" Value="Hidden"/>
                    </Trigger>

                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="Content">
                            <Setter.Value>
                                <Grid Width="29" Height="35" VerticalAlignment="Center" HorizontalAlignment="Center">
                                    <Image Source="/Resources/CogwheelRed.png" VerticalAlignment="Top" HorizontalAlignment="Left" Width="20" Height="20" Margin="0" Stretch="Uniform" RenderTransformOrigin="0.5,0.5">
                                        <Image.RenderTransform>
                                            <RotateTransform Angle="0" />
                                        </Image.RenderTransform>

                                        <Image.Triggers>
                                            <EventTrigger RoutedEvent="Control.Loaded">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation AutoReverse="False"                             
                                                            Duration="0:0:3"
                                                            From="0"
                                                            RepeatBehavior="Forever"
                                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                            To="360" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Image.Triggers>
                                    </Image>

                                    <Image Source="/Resources/CogwheelRed.png" VerticalAlignment="Top" HorizontalAlignment="Left" Width="20" Height="20" Margin="9,15,0,0" Stretch="Uniform" RenderTransformOrigin="0.5,0.5">
                                        <Image.RenderTransform>
                                            <RotateTransform Angle="0" />
                                        </Image.RenderTransform>
                                        
                                        
                                        <Image.Triggers>
                                            <EventTrigger RoutedEvent="Control.Loaded">
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation AutoReverse="False"                             
                                                            Duration="0:0:3"
                                                            From="0"
                                                            RepeatBehavior="Forever"
                                                            Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                                            To="-360" />
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </EventTrigger>
                                        </Image.Triggers>
                                    </Image>
                                </Grid>
                            </Setter.Value>
                        </Setter>
                    </Trigger>

                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Content">
                            <Setter.Value>
                                <Grid Width="29" Height="35" VerticalAlignment="Center" HorizontalAlignment="Center">
                                    <Image Source="/Resources/CogwheelGray.png" VerticalAlignment="Top" HorizontalAlignment="Left" Width="20" Height="20" Margin="0" Stretch="Uniform"/>
                                    <Image Source="/Resources/CogwheelGray.png" VerticalAlignment="Top" HorizontalAlignment="Left" Width="20" Height="20" Margin="9,15,0,0" Stretch="Uniform" />
                                </Grid>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
  

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

Поскольку это довольно статичный дизайн, альтернативным подходом было бы заменить ContentPresenter реальными изображениями, а затем только изменить их источники и запустить анимацию при IsChecked.

Вот рабочий XAML:

 <SolidColorBrush x:Key="CogwheelButton.Border.Color" Color="Transparent" />
<SolidColorBrush x:Key="CogwheelButton.Background.Color" Color="Transparent" />

<Style x:Key="CogwheelButton" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="{StaticResource CogwheelButton.Background.Color}" />
    <Setter Property="BorderBrush" Value="{StaticResource CogwheelButton.Border.Color}" />
    <Setter Property="Padding" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border x:Name="border"
                    Background="{TemplateBinding Background}"
                    BorderBrush="Transparent"
                    BorderThickness="0">
                    <Grid
                        Width="29"
                        Height="35"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center">
                        <Image x:Name="Cog1"
                            Width="20"
                            Height="20"
                            Margin="0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            RenderTransformOrigin="0.5,0.5"
                            Source="/Resources/CogwheelGray.png"
                            Stretch="Uniform">
                            <Image.RenderTransform>
                                <RotateTransform Angle="0" />
                            </Image.RenderTransform>
                        </Image>
                        <Image x:Name="Cog2"
                            Width="20"
                            Height="20"
                            Margin="9,15,0,0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top"
                            RenderTransformOrigin="0.5,0.5"
                            Source="/Resources/CogwheelGray.png"
                            Stretch="Uniform">
                            <Image.RenderTransform>
                                <RotateTransform Angle="0" />
                            </Image.RenderTransform>
                        </Image>
                    </Grid>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Control.Visibility" Value="Hidden" />
                    </Trigger>

                    <Trigger Property="IsChecked" Value="True">
                        <Setter TargetName="Cog1" Property="Source" Value="/Resources/CogwheelRed.png" />
                        <Setter TargetName="Cog2" Property="Source" Value="/Resources/CogwheelRed.png" />
                        <Trigger.EnterActions>
                            <BeginStoryboard x:Name="CogAnimation">
                                <Storyboard>
                                    <DoubleAnimation
                                        AutoReverse="False"
                                        RepeatBehavior="Forever"
                                        Storyboard.TargetName="Cog1"
                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                        From="0"
                                        To="360"
                                        Duration="0:0:3" />
                                    <DoubleAnimation
                                        AutoReverse="False"
                                        RepeatBehavior="Forever"
                                        Storyboard.TargetName="Cog2"
                                        Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                        From="0"
                                        To="-360"
                                        Duration="0:0:3" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <StopStoryboard BeginStoryboardName="CogAnimation" />
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>