How do I specify images for a button outside my button template?

Question

Hi,

I need to make several buttons for my GUI and i want them to all use the template I have created which has visualstategroup and storyboard stuff in it. However, each button will be using a different image. Right now I have the template created for one button and it references two images for different states of the button, and it simply changes the opacity of the images based on the button states. How can i specify these images outside the template in my main windows xaml so that each button can have unique images but use the same storyboard/visualstategroup data?

Currently in my main window xaml:

<Button Template="{StaticResource CloseXButton}" HorizontalAlignment="Left" Margin="716,250,0,0" VerticalAlignment="Top" Width="40" Height="40"/>

Currently in my WindowControls.xaml resource dictionary:

<ControlTemplate x:Key="CloseXButton" TargetType="{x:Type Button}">
        <ControlTemplate.Resources>
            <Style TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid SnapsToDevicePixels="True">
                                
                                <VisualStateManager.VisualStateGroups>
				
				</VisualStateManager.VisualStateGroups>

                                <Image Name="buttonBackgroundShape" Source="/ControlImages/over.tif" Width="40" Height="40"></Image>
                                <Image Name="buttonShape" Source="/ControlImages/normal.tif" Width="40" Height="40"></Image>

                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ControlTemplate.Resources>
        <Button/>
    </ControlTemplate>

The Storyboard.TargetName properties inside the visualstategroup sections just refer to the names of those images.

Thanks,

Greg

Answer 1

Hi Greg,

I understand you want each button with different image when under different state and also reuse the controltemplate, right?

I think you can use a UserControl to achieve your goal. First to create a UserControl within only one button, and add several DP to UserControl as different image source path. Then set the Control template to the button, in the template bind the image with DP. Then when you use this UserControl(your custom button), you just need to set different DP as image source as you want in different state to achieve your goal. You can refer to below link with code for your reference: http://social.msdn.microsoft.com/Forums/hr/wpf/thread/57525768-42c2-4ab9-b838-60702f51b510

Hope it helps.

If you have any additional questions, please feel free to let me know.

Have a nice day.

---

Annabella Luo[MSFT]
MSDN Community Support | Feedback to us