How can I make this Xaml a Template?

Question

Without using code, how can I turn this into a Template?

I have about 10 of these, and my code is getting huge. It is working perfectly, I am just looking for ways to clean up the code, I am just not familiar enough with templating and resourcing animations and triggers to do this.

Thanks in advance.

 <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

You need to create a style.

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

And the rest (SO seems to cut off long code snippets):

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

For each button, you'll have something like this:

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