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>