Sunday, December 18, 2016

Style Examples - First

Case 1 : Consider a case where we have a Button in user control and we want following things

Backgrond  : Green
FontStyle  : Italic
Margin : 5
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"></Setter>
            <Setter Property="FontStyle" Value="Italic"></Setter>
            <Setter Property="Margin" Value="5"></Setter>           
        </Style>

    </UserControl.Resources>

        <StackPanel Orientation="Horizontal">
            <Button Content="It" Width="100" Height="30"></Button>
            <Button Content="is" Width="100" Height="30"></Button>
            <Button Content="my style" Width="100" Height="30"></Button>
        </StackPanel>

Sunday, December 11, 2016

Scope of styles

Scope of styles

In the previous post (Introduction of Style) , we introduce the concept of styles, in which we used a very basic example of locally define style, which targeted a TextBlock.
Style can defined in several different scopes, it depends where and how you want to use them.

In this post,we will see in how many different ways styles can be defined.

Local control specific style

You can actually define a style directly on a control. in this scope, style can be used in control itself only.

<Window x:Class="WpfTricks.LocalStyle"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LocalStyle" Height="300" Width="300">
    <Grid>
        <TextBlock Width="200" Height="50" Text="Local Style">
            <TextBlock.Style>
                <Style>
                    <Setter Property="TextBlock.Foreground" Value="Red" />
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>



<Window x:Class="WpfTricks.LocalStyle"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="LocalStyle" Height="300" Width="300">
    <Grid>
        <TextBlock Width="200" Height="50" Text="Local Style">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Foreground" Value="Red" />
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>
  


Local child control style

When style is define in the Resource of a control , you can target the child control of this control.

<Window x:Class="WpfTricks.LocalChildControl"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Local Child Control Style" Height="150" Width="300">
    <Grid>
        <StackPanel>
            <StackPanel.Resources>
                <Style TargetType="Label">
                    <Setter Property="Background" Value="Yellow"></Setter>
                    <Setter Property="Foreground" Value="Red"></Setter>
                    <Setter Property="Margin" Value="5,5"></Setter>
                </Style>
            </StackPanel.Resources>
            <Label>Label 1</Label>
            <Label>Label 2</Label>
            <Label>Label 3</Label>
        </StackPanel>
    </Grid>
</Window>


Window Level Style

In this scope of style, specific style can be use with in the Window/UserControl for all controls for which style is targeted, In this scope we have to define style under the Window/UserControl resource

<Window x:Class="WpfTricks.WindowLevelStyle"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window Level Style" Height="150" Width="300">
    <Window.Resources>
        <Style TargetType="Label">
            <Setter Property="Background" Value="Yellow"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="Margin" Value="5,5"></Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Label>Label 1</Label>
            <Label>Label 2</Label>
            <Label>Label 3</Label>
        </StackPanel>
    </Grid>
</Window>


Application Level Styles

If we want to define global styles for whole application(use application wide) so that it can be use across different windows/user controls , we need to create style in App.xaml file similar to above way, like this we can use these styles application wide.



<Application x:Class="WpfTricks.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="WindowLevelStyle.xaml">
    <Application.Resources>
        <Style TargetType="Label">
            <Setter Property="Background" Value="Yellow"></Setter>
            <Setter Property="Foreground" Value="Red"></Setter>
            <Setter Property="Margin" Value="5,5"></Setter>
        </Style>
    </Application.Resources>
</Application>



<Window x:Class="WpfTricks.ApplicationLevelStyle"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ApplicationLevelStyle" Height="200" Width="300">
    <Grid>
        <StackPanel>
            <Label>Label 1</Label>
            <Label>Label 2</Label>
            <Label>Label 3</Label>
        </StackPanel>
    </Grid>
</Window>