WPF Favorite Button

With this post I want to present c# source code for implementing a favorite button in WPF.

An empty favorite button becomes visible on moving the mouse into the window pane. You’ll also get a tooltip “add to favorites”:

Favorite1

On clicking the favorite button you get the following with tooltip “remove from favorites”:

Favorite2

SourceCode:

<Window x:Class="FavoriteButton.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Favoriten" Height="160" Width="160" ResizeMode="NoResize">

    <Window.Resources>
        <BitmapImage x:Key="Star" UriSource="/Images/star.png" />
        <BitmapImage x:Key="StarEmpty" UriSource="/Images/star empty.png" />
    </Window.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <ToggleButton Focusable="False" HorizontalAlignment="Left" Margin="55,40,0,0"  VerticalAlignment="Top" Width="40" Height="40" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" IsTabStop="False" >
            <ToggleButton.Style>
                <Style TargetType="{x:Type ToggleButton}">                                       
                    <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    <Setter Property="VerticalContentAlignment" Value="Center"/>                 
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ToggleButton}">
                                <Border>
                                    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                                      RecognizesAccessKey="True"                                                   
                                                      HorizontalAlignment="Center"/>
                                </Border>
                                
                                <ControlTemplate.Triggers>                                                                     
                                    <MultiDataTrigger>
                                        <MultiDataTrigger.Conditions>
                                            <Condition Binding = "{Binding ElementName=LayoutRoot, Path=IsMouseOver}" Value="True" />
                                            <Condition Binding = "{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsChecked}" Value="False" />
                                            <Condition Binding = "{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsEnabled}" Value="True" />
                                        </MultiDataTrigger.Conditions>

                                        <Setter Property="Content">
                                            <Setter.Value>                                                
                                                    <Image Source="{StaticResource StarEmpty}"/>                                                
                                            </Setter.Value>                                            
                                        </Setter>
                                        <Setter Property="ToolTip" Value="Zu Favoritenliste hinzufügen"/>
                                    </MultiDataTrigger>                                      

                                    <Trigger  Property="IsChecked" Value="True">
                                        <Setter Property="Content">
                                            <Setter.Value>                                                
                                                    <Image Source="{StaticResource Star}"/>
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="ToolTip" Value="Aus Favoritenliste entfernen"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ToggleButton.Style>            
        </ToggleButton>
    </Grid>
</Window>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s