CODEWITHSUNDEEP
c#wpfexpression-blend
Naser Asadi
Naser Asadi

Reputation: 1233

Create expression-blend-like buttons style

I want to create a button style like expression blend buttons in this way:

Is it possible to create such a style for XAML icons without coding in expression blend ?

Note that I dont want to use 2 icons.

Upvotes: 0

Views: 840

Answers (2)

Sorskoot
Sorskoot

Reputation: 10310

When using a Paths instead of an image you can use the Visual State to switch from showing the paths with a border and transparant fills to the original a very easily.

You can use InkScape to convert your own images to paths(xaml), search prepared images online on sites like Xamalot or use a tool like Syncfusion Metro Studio to create the xaml you'd like.

Upvotes: 2

sa_ddam213
sa_ddam213

Reputation: 43606

Somthing like this could be a good place to start.

You have 2 images(these are from an online source, bit you can replace with a resource .png) the "iconfocus" will be visible when the mouse is over the button, and the "iconNofocus" will be visible when not.

This is a very rough example:

 <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="PART_border" Background="{TemplateBinding Background}"  BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
                            <Grid>
                                <Border x:Name="Highlight" Opacity="0">
                                    <Border.Background>
                                        <LinearGradientBrush EndPoint="0.5,0.1" StartPoint="0.5,0.8">
                                            <GradientStop Color="#90009FFF" Offset="0"/>
                                            <GradientStop Color="#00FFFFFF" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Border.Background>
                                </Border>
                                <StackPanel Orientation="Horizontal">
                                    <Grid Width="{TemplateBinding ActualHeight}"  Height="{TemplateBinding ActualHeight}">
                                        <Image x:Name="iconFocus" Margin="2" Opacity="0" Source="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Folder-icon.png"/>
                                        <Image x:Name="iconNofocus" Margin="2" Opacity="0.5" Source="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Folder-Generic-Green-icon.png"/>
                                    </Grid>
                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" />
                                </StackPanel>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="Highlight" Property="Opacity" Value="1" />
                                <Setter TargetName="iconFocus" Property="Opacity" Value="1" />
                                <Setter TargetName="iconNofocus" Property="Opacity" Value="0" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Normal: enter image description here

Mouse Over: enter image description here

Upvotes: 2

Related Questions