ListBox With Items Panel


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

    <ListBox HorizontalAlignment="Center" VerticalAlignment="Center">

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>

        <ListBoxItem>Whatever Item 1</ListBoxItem>
        <ListBoxItem>Whatever Item 2</ListBoxItem>
        <ListBoxItem>Whatever Item 3</ListBoxItem>
        <ListBoxItem>Whatever Item 4</ListBoxItem>
        <ListBoxItem>Whatever Item 5</ListBoxItem>
        <ListBoxItem>Whatever Item 6</ListBoxItem>
        <ListBoxItem>Whatever Item 7</ListBoxItem>
        <ListBoxItem>Whatever Item 8</ListBoxItem>
        <ListBoxItem>Whatever Item 9</ListBoxItem>

    </ListBox>
</Page>

   
    
    
    
    
    
     


Using LinearGradientBrush to draw a 3D button


   
    
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <Rectangle Width="80" Height="30">
        <Rectangle.Fill>
            <VisualBrush>
                <VisualBrush.Visual>
                    <Grid Width="80" Height="26">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="2*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <Rectangle Grid.RowSpan="2" RadiusX="13" RadiusY="13">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="Red" Offset="0" />
                                    <GradientStop Color="DarkRed" Offset="1" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
         
                        </Rectangle>

                        <Rectangle Margin="3,2" RadiusX="8" RadiusY="12">
                            <Rectangle.Fill>
                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                    <GradientStop Color="#dfff" Offset="0" />
                                    <GradientStop Color="#0fff" Offset="1" />
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>

                    </Grid>
                </VisualBrush.Visual>
            </VisualBrush>
        </Rectangle.Fill>
    </Rectangle>

</Page>

   
    
    
    
     


Animated GradientStop Opacity


   
  

<Window x:Class="WpfApplication1.ShapesWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ShapesWindow" Height="160" Width="400">
      <Window.Resources>
        <Style TargetType="{x:Type TextBlock}">
          <Setter Property="Background" Value="White" />
          <Setter Property="Padding" Value="10" />
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <OuterGlowBitmapEffect GlowColor="White" />
            </Setter.Value>
          </Setter>
        </Style>
        <Style TargetType="{x:Type Rectangle}">
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <DropShadowBitmapEffect />
            </Setter.Value>
          </Setter>
        </Style>
      </Window.Resources>
    <StackPanel>

          <Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1" Margin="10">
            <Rectangle.Fill>
              <LinearGradientBrush>
                <GradientStop Color="MediumBlue" Offset="0.0" />
                <GradientStop x:Name="gradientStopC2" Color="Purple" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
              </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.Triggers>
              <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <BeginStoryboard>
                  <Storyboard>
                    <ColorAnimation 
                      Storyboard.TargetName="gradientStopC2"
                      Storyboard.TargetProperty="Color" 
                      Duration="0:0:3" FillBehavior="Stop">
                      <ColorAnimation.By>
                        <Color ScA="-1" ScR="0" ScB="0" ScG="0" />
                      </ColorAnimation.By>
                    </ColorAnimation>
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Rectangle.Triggers>
          </Rectangle>

    </StackPanel>
</Window>

   
    
     


Animated GradientStop Color


   
  

<Window x:Class="WpfApplication1.ShapesWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ShapesWindow" Height="160" Width="400">
      <Window.Resources>
        <Style TargetType="{x:Type TextBlock}">
          <Setter Property="Background" Value="White" />
          <Setter Property="Padding" Value="10" />
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <OuterGlowBitmapEffect GlowColor="White" />
            </Setter.Value>
          </Setter>
        </Style>
        <Style TargetType="{x:Type Rectangle}">
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <DropShadowBitmapEffect />
            </Setter.Value>
          </Setter>
        </Style>
      </Window.Resources>
    <StackPanel>
          <Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1" Margin="10">
            <Rectangle.Fill>
              <LinearGradientBrush>
                <GradientStop Color="MediumBlue" Offset="0.0" />
                <GradientStop x:Name="gradientStopB2" Color="Purple" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
              </LinearGradientBrush>
            </Rectangle.Fill>

            <Rectangle.Triggers>
              <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <BeginStoryboard>
                  <Storyboard>
                    <ColorAnimation 
                      Storyboard.TargetName="gradientStopB2"
                      Storyboard.TargetProperty="Color"
                      From="Purple" To="Yellow" Duration="0:0:3" FillBehavior="Stop" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Rectangle.Triggers>
          </Rectangle>

    </StackPanel>
</Window>

   
    
     


Animated GradientStop Offset


   
  
<Window x:Class="WpfApplication1.ShapesWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="ShapesWindow" Height="160" Width="400">
      <Window.Resources>
        <Style TargetType="{x:Type TextBlock}">
          <Setter Property="Background" Value="White" />
          <Setter Property="Padding" Value="10" />
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <OuterGlowBitmapEffect GlowColor="White" />
            </Setter.Value>
          </Setter>
        </Style>
        <Style TargetType="{x:Type Rectangle}">
          <Setter Property="BitmapEffect">
            <Setter.Value>
              <DropShadowBitmapEffect />
            </Setter.Value>
          </Setter>
        </Style>
      </Window.Resources>
    <StackPanel>
          <Rectangle Width="200"  Height="100" Stroke="Black" StrokeThickness="1" Margin="10">
            <Rectangle.Fill>
              <LinearGradientBrush>
                <GradientStop Color="MediumBlue" Offset="0.0" />
                <GradientStop x:Name="gradientStopA2" Color="Purple" Offset="0.5" />
                <GradientStop Color="Red" Offset="1.0" />
              </LinearGradientBrush>
            </Rectangle.Fill>

            <Rectangle.Triggers>
              <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation 
                      Storyboard.TargetName="gradientStopA2"
                      Storyboard.TargetProperty="Offset"
                      From="0.0" To="1.0" Duration="0:0:3" FillBehavior="Stop" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger>
            </Rectangle.Triggers>
          </Rectangle>
    </StackPanel>
</Window>

   
    
     


LinearGradientBrush Opacity from 1 to 0


   
  
<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Window.Resources>
        <GradientStopCollection x:Key="myGradientStops">
      <GradientStop Color="Blue" Offset="0.0" />
      <GradientStop Color="Black" Offset="0.5" />
      <GradientStop Color="Transparent" Offset="1.0" />
    </GradientStopCollection>
    </Window.Resources>
    <StackPanel>

    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="1" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0.75" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0.5" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0.25" />
      </Rectangle.Fill>
    </Rectangle>
    <Rectangle Width="100" Height="50" Stroke="Black" StrokeThickness="1">
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}" Opacity="0" />
      </Rectangle.Fill>
    </Rectangle>
    </StackPanel>
</Window>

   
    
     


GradientStopCollection


   
  
<Window x:Class="Workspace.DockExample"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Workspace" Width="640" Height="480">
    <Window.Resources>
    <GradientStopCollection x:Key="myGradientStops">
      <GradientStop Offset="0.0" Color="Blue" />
      <GradientStop Offset="0.4" Color="Black" />
      <GradientStop Offset="0.5" Color="White" />
      <GradientStop Offset="0.6" Color="Black" />
      <GradientStop Offset="0.7" Color="Blue" />
    </GradientStopCollection>
    
    </Window.Resources>


    <Rectangle Width="175" Height="90" Stroke="Black" >
      <Rectangle.Fill>
        <LinearGradientBrush GradientStops="{StaticResource myGradientStops}">
          <LinearGradientBrush.Transform>
            <RotateTransform CenterX="87.5" CenterY="45" Angle="45" />
          </LinearGradientBrush.Transform>
        </LinearGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
</Window>