WPF Tutorial 02 – Splitting code, layout and style

1. Open (or create a new empty) Visual Studio Solution: WPFTutorials
2. Add to the solution a new C#, Avalon Application: 02_Split
3. Add the following code to the Window1.xaml file:

   <Grid>
     <Grid VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"
   Height="100">
       <Grid.ColumnDefinitions>
         <ColumnDefinition/>
       </Grid.ColumnDefinitions>
       <Grid.RowDefinitions>
         <RowDefinition/>
       </Grid.RowDefinitions>
       <TextBlock Name="ValueLabel"
   VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="0"
   Grid.Row="0">Hello</TextBlock>
     </Grid>
   </Grid>
   

4. Run the application to see the result
5. Right-click on the project and add a new item of type Avalon
   ResourceDictionary: Style1.xaml
6. Add the following code to the ResourceDictionary:

   <Style x_Key="MyStyle" TargetType="{x:Type TextBlock}">
     <Setter Property="Background" Value="Green" />
     <Setter Property="Foreground" Value="White" />
     <Setter Property="FontSize" Value="40"/>
   </Style>
    

7. Now change the Window1.xaml file by adding a Resources tag to the Window
   tag like this:

   <Window.Resources>
     <ResourceDictionary x:Name ="Style1" Source="Style1.xaml" />
   </Window.Resources>
    

8. And by changing the TextBlock by adding an attribute called Style:

   <TextBlock Style="{StaticResource MyStyle}" Name="ValueLabel"
   VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="0"
   Grid.Row="0">Hello</TextBlock>
    

9. Run the application.

Share this