Grid in ScrollViewer

image_pdfimage_print


   
       

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  HorizontalAlignment="Center" VerticalAlignment="Center">
<ScrollViewer>
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Border Grid.Column="0" Grid.Row="0" Background="LightGray" BorderBrush="Gray" BorderThickness="1">
      <TextBlock>Key</TextBlock>
    </Border>
    <Border Grid.Column="1" Grid.Row="0" Background="LightGray" BorderBrush="Gray" BorderThickness="1">
        <TextBlock>Value</TextBlock>
    </Border>
    <Border Grid.Column="2" Grid.Row="0" Background="LightGray" BorderBrush="Gray" BorderThickness="1">
      <TextBlock>Value 2</TextBlock>
    </Border>
    <TextBlock Grid.Column="0" Grid.Row="1" Text="WPF" />
    <TextBlock Grid.Column="1" Grid.Row="1" Text="Inc." />
    <TextBlock Grid.Column="2" Grid.Row="1" Text="this" />
    <TextBlock Grid.Column="0" Grid.Row="2" Text="is" />
    <TextBlock Grid.Column="1" Grid.Row="2" Text="a" />
    <TextBlock Grid.Column="2" Grid.Row="2" Text="test" />
  </Grid>
</ScrollViewer>
</Page>

   
    
    
    
    
    
    
     


Margin vs Padding and Grid

image_pdfimage_print


   
       

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  HorizontalAlignment="Center" VerticalAlignment="Center">
    <Grid ShowGridLines="True" Background="Cyan">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
      </Grid.RowDefinitions>
      <Button Grid.Column="0" Margin="20" Padding="0" >Click me!</Button>
      <Button Grid.Column="1" Margin="10" Padding="10">Click me!</Button>
      <Button Grid.Column="2" Margin="0"  Padding="20">Click me!</Button>
    </Grid>
</Page>

   
    
    
    
    
    
    
     


Without Panel.ZIndex

image_pdfimage_print


   
       

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
  <Button Width="75" Height="23" Margin="0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
    One
  </Button>
  <Button Width="75" Height="23" Margin="15,15" HorizontalAlignment="Left" VerticalAlignment="Top">
    Two
  </Button>
  <Button Width="75" Height="23" Margin="30,30" HorizontalAlignment="Left" VerticalAlignment="Top">
    Three
  </Button>
</Grid>
</Page>

   
    
    
    
    
    
    
     


Panel.ZIndex

image_pdfimage_print


   
       

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid>
  <Button Width="75" Height="23" Margin="0,0" Panel.ZIndex="3" HorizontalAlignment="Left" VerticalAlignment="Top">
    One
  </Button>
  <Button Width="75" Height="23" Margin="15,15" Panel.ZIndex="2" HorizontalAlignment="Left" VerticalAlignment="Top">
    Two
  </Button>
  <Button Width="75" Height="23" Margin="30,30" Panel.ZIndex="1" HorizontalAlignment="Left" VerticalAlignment="Top">
    Three
  </Button>
</Grid>
</Page>

   
    
    
    
    
    
    
     


Stretched GridSplitter

image_pdfimage_print


   
       

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

        <Grid Height="100" Width="400">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="6" />
            <ColumnDefinition Width="2*" />
          </Grid.ColumnDefinitions>
        
          <Ellipse Grid.Column="0" Fill="Red" />
          <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />
          <Ellipse Grid.Column="2" Fill="Blue" />
        </Grid>
</Page>

   
    
    
    
    
    
    
     


Create FishEye Effect Buttons by changing the Button font size

image_pdfimage_print


   
       

<StackPanel xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <StackPanel.Resources>
        <Style TargetType="{x:Type Button}">
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="12" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Trigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetProperty="FontSize"
                                    To="36" Duration="0:0:1" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.EnterActions>

                    <Trigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation 
                                    Storyboard.TargetProperty="FontSize"
                                    To="12" Duration="0:0:0.25" />
                            </Storyboard>
                        </BeginStoryboard>
                    </Trigger.ExitActions>
                </Trigger>
            </Style.Triggers>
        </Style>
    </StackPanel.Resources>

    <Button>Button No. 1</Button>
    <Button>Button No. 2</Button>
    <Button>Button No. 3</Button>
</StackPanel>

   
    
    
    
    
    
    
     


Font Viewer

image_pdfimage_print


   
       
<Window x:Class="FontViewer.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Teach Yourself WPF: Font Viewer"
        Height="480"
        Width="640">
    <DockPanel Margin="8">

        <ListBox x:Name="FontList"
                 DockPanel.Dock="Left"
                 ItemsSource="{x:Static Fonts.SystemFontFamilies}"
                 Width="160" />
        <TextBox x:Name="SampleText"
                 DockPanel.Dock="Bottom"
                 MinLines="4"
                 Margin="8 0"
                 TextWrapping="Wrap">
            <TextBox.ToolTip>
                <TextBlock>
                    <Italic Foreground="Red">Instructions: </Italic> Type here to change the preview text.
                </TextBlock>
            </TextBox.ToolTip>
            The quick brown fox jumps over the lazy dog.
        </TextBox>
        <StackPanel Margin="8 0 8 8">
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
                       FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
                       FontSize="10"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4" />
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
                       FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
                       FontSize="16"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4" />
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
                       FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
                       FontSize="24"
                       TextWrapping="Wrap"
                       Margin="0 0 0 4" />
            <TextBlock Text="{Binding ElementName=SampleText, Path=Text}"
                       FontFamily="{Binding ElementName=FontList,Path=SelectedItem}"
                       FontSize="32"
                       TextWrapping="Wrap" />
        </StackPanel>
    </DockPanel>
</Window>