Posted by: Zeeshan Amjad | June 4, 2010

Using Path in control template


We saw the usage of Path here. We can create very interesting geometrical shape with the help of it.  If we use this with control template then we can give very interesting effect to the control. Let’s take a look at the example of tab control. Here we are going to change the control template of tab control and use path. We already saw one example of defining control template of tab control here.

We are going to do something very similar. We are going to define template in the form of style define in windows resource section. Here is our starting point.

<Window.Resources>
	<Style TargetType="TabItem">
		<Setter Property="Template">
			<Setter.Value>
				<ControlTemplate TargetType="{x:Type TabItem}">
				</ControlTemplate>
			</Setter.Value>
		</Setter>
	</Style>
</Window.Resources>

Here we are going to define two path to give the left arrow and right arrow effect. We use grid layout to display two arrows and the content of the tab control. Here is complete XAML code of the program.

<Window x:Class="WpfPath.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Path" Height="300" Width="400">
    <Window.Resources>
        <Style TargetType="TabItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TabItem}">
                        <Grid Name="grid" Margin="3" Background="Beige">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            
                            <Border Grid.Column="1" Margin="2">
                                <ContentPresenter Grid.Column="1" VerticalAlignment="Center" ContentSource="Header"/>
                            </Border>                            
                            
                            <Path Grid.Column="0"
					              Margin="2"
					              Fill="Red"
					              HorizontalAlignment="Center"
					              VerticalAlignment="Center"
					              Data="M 15,0 L 0,15 L 15,30 L 10,15 Z"/>
                            <Path Grid.Column="2"
					              Margin="2"
					              Fill="Blue"
					              HorizontalAlignment="Center"
					              VerticalAlignment="Center"
					              Data="M 15,0 L 30,15 L 15,30 L 20, 15 Z"/>
                        </Grid>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="grid" Property="Background" Value="Wheat" />
                            </Trigger>
                            <Trigger Property="IsSelected" Value="False">
                                <Setter TargetName="grid" Property="Background" Value="Beige" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <TabControl>
        <TabItem Header="Maryland">
            <TextBlock Text="Baltimore"/>
        </TabItem>
        <TabItem Header="Virginia">
            <TextBlock Text="Virginia Beach"/>
        </TabItem>
        <TabItem Header="California">
            <TextBlock Text="Los Angeles"/>
        </TabItem>
        <TabItem Header="Washington">
            <TextBlock Text="Seattle"/>
        </TabItem>
    </TabControl>
</Window>

Here is the output of this program.

PathInTabControl

Advertisements

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

Categories

%d bloggers like this: