Как я могу сделать этот Xaml шаблоном?

Question

Без использования кода, как я могу превратить это в шаблон?

У меня их около 10, и мой код становится огромным. Он работает отлично, я просто ищу способы очистки кода, я просто недостаточно знаком с шаблонами и ресурсами анимации и триггеров для этого.

Заранее спасибо.

    <RadioButton Width="35" Height="35" Content="RadioButton" Visibility="Visible" IsChecked="False" Margin="2.5,2.5,2.5,2.5" Template="{DynamicResource RadioTemplate}" >
        <RadioButton.Resources>
            <ControlTemplate x:Key="RadioTemplate" TargetType="{x:Type RadioButton}">
                <BulletDecorator Background="Transparent">
                    <BulletDecorator.Bullet>
                        <StackPanel>
                            <Image Width="Auto" Height="Auto" Source="..\Content\img.png" Stretch="Fill" />
                        </StackPanel>
                    </BulletDecorator.Bullet>
                </BulletDecorator>
            </ControlTemplate>
        </RadioButton.Resources>
        <RadioButton.BitmapEffect>
            <OuterGlowBitmapEffect x:Name="imageGlow" GlowColor="#FFeeba00" Opacity="1" GlowSize="0" />
        </RadioButton.BitmapEffect>
        <RadioButton.Triggers>
            <EventTrigger RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="imageGlow" Storyboard.TargetProperty="GlowSize" From="0" To="10" Duration="0:0:.15" AutoReverse="False" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="imageGlow" Storyboard.TargetProperty="GlowSize" From="10" To="0" Duration="0:0:.15" AutoReverse="False" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </RadioButton.Triggers>
    </RadioButton>

Answer 1

Вам нужно создать стиль.

<Style x:Key="RadioStyle" TargetType="{x:Type RadioButton}">
    <Setter Property="Width" Value="35"/>
    <Setter Property="Height" Value="35"/>
    <Setter Property="Margin" Value="2.5"/>
    <Setter Property="BitmapEffect">
        <Setter.Value>
            <OuterGlowBitmapEffect GlowColor="#FFeeba00" Opacity="1" GlowSize="0" />
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <BulletDecorator Background="Transparent">
                    <BulletDecorator.Bullet>
                        <StackPanel>
                            <ContentPresenter/>
                        </StackPanel>
                    </BulletDecorator.Bullet>
                </BulletDecorator>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
<!--Continued-->

И все остальное (похоже, отрезаны длинные фрагменты кода):

    <Style.Triggers>
        <EventTrigger RoutedEvent="ToggleButton.Checked">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="BitmapEffect.GlowSize" From="0" To="10" Duration="0:0:.15" AutoReverse="False" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        <EventTrigger RoutedEvent="ToggleButton.Unchecked">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetProperty="BitmapEffect.GlowSize" From="10" To="0" Duration="0:0:.15" AutoReverse="False" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

Для каждой кнопки у вас будет что-то вроде этого:

<RadioButton Style="{DynamicResource RadioStyle}" Visibility="Visible" IsChecked="False">
    <Image Width="Auto" Height="Auto" Source="..\Content\img.png" Stretch="Fill" />
</RadioButton>