Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Does anyone know how to define a Custom Control based on a Button that pulls it's Style from a ResourceDictionary?

What I'm trying to do is define a Button that is sort of like a toggle switch, it has a default Image displayed, then when the user presses it, it will show the second Image (which is a Path in this case), then revert to the first once the user presses it again.

I need a custom control so that I can programatically toggle the button if certain things happen. It would work sort of like the play button on any Media Player.

Any advice would be great.
Posted

1 solution

As I realized, you need a control that behaves exactly like a ToggleButton but, looks different. - You don't need a custom control for that purpose.


You can just create a Style and set it to your ToggleButton, like in the following Grid:


XML
<Grid>
    <Grid.Resources>
        <Style x:Key="myToggleButtonStyle"
                TargetType="{x:Type ToggleButton}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToggleButton}">
                        <Grid>
                            <Grid x:Name="uncheckedGrid">
                                <Rectangle Stroke="DarkGreen" StrokeThickness="2"
                                            Fill="LightGreen" />
                                <TextBlock Text="Unchecked" Margin="20" />
                            </Grid>
                            <Grid x:Name="checkedGrid" Visibility="Collapsed">
                                <Ellipse Stroke="DarkRed" StrokeThickness="2"
                                            Fill="Salmon" />
                                <TextBlock Text="Checked" Margin="20" />
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Visibility" TargetName="uncheckedGrid"
                                        Value="Collapsed" />
                                <Setter Property="Visibility" TargetName="checkedGrid"
                                        Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Grid.Resources>
        
    <ToggleButton Style="{StaticResource myToggleButtonStyle}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center" />
        
</Grid>

In this Grid, there is a ToggleButton that shows a Rectangle when it is unchecked and, shows an Ellipse when it is checked. You can replace the Rectangle and the Ellipse with your images.

 
Share this answer
 
Comments
Fox536 19-Feb-12 15:33pm    
Hmmm, I didn't see a toggle button earlier, but I'll have a look again see if I can find it. Can you change the State using C# Code as well?
Shmuel Zang 20-Feb-12 3:21am    
You can handle the ToggleButton.Checked and the ToggleButton.Unchecked events and, set the Content of the ToggleButton appropriately. But, why do you want to do something like this?
Fox536 20-Feb-12 23:08pm    
The end of the music, and or movie file should make it go back to the default state of unchecked, until the user presses it again.
Shmuel Zang 21-Feb-12 3:05am    
So, all what you need is to set the IsChecked property of the ToggleButton appropriately, when the media is ended.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900