RadialGradientBrush examples and Define GradientStop in Resource

image_pdfimage_print


   
  
<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>
        <RadialGradientBrush GradientStops="{StaticResource myGradientStops}"></RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>

</Window>

   
    
     


RadialGradientBrush GradientOrigin

image_pdfimage_print


   
  


<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      WindowTitle="StackPanel vs. DockPanel">
  <Grid Width="175" Height="150">
    <Rectangle Grid.Row="1" Grid.Column="0"  Width="100" Height="100" 
      StrokeThickness="4" Margin="4">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" 
          RadiusX="0.5" RadiusY="0.5">
          <GradientStop Color="Black" Offset="0" />
          <GradientStop Color="Gray" Offset="0.45" />
          <GradientStop Color="Black" Offset="0.85" />
        </RadialGradientBrush>
      </Rectangle.Fill>
      <Rectangle.Stroke>
        <SolidColorBrush Color="Blue"/>
      </Rectangle.Stroke>
    </Rectangle>
  </Grid>
</Page>

   
    
     


RadialGradientBrush Rectangle.Stroke

image_pdfimage_print


   
  

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      WindowTitle="StackPanel vs. DockPanel">
  <Grid Width="175" Height="150">
    <Rectangle Grid.Row="1" Grid.Column="1"  Width="100" Height="100" 
      StrokeThickness="8" Margin="4">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" 
          RadiusX="0.5" RadiusY="0.5">
          <GradientStop Color="Red" Offset="0" />
          <GradientStop Color="Green" Offset="0.45" />
          <GradientStop Color="Yellow" Offset="0.85" />
        </RadialGradientBrush>
      </Rectangle.Fill>
      <Rectangle.Stroke>
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" 
          RadiusX="0.5" RadiusY="0.5">
          <GradientStop Color="Black" Offset="0.95" />
          <GradientStop Color="Gray" Offset="0.95" />
        </RadialGradientBrush>
      </Rectangle.Stroke>
    </Rectangle>
  </Grid>
</Page>

   
    
     


Checked RadioButton

image_pdfimage_print


   
    

<Window x:Class="SimpleStyles.Window1"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="SimpleStyles"
  Background="#F8F8F8">
  <ScrollViewer>
    <WrapPanel>
      <HeaderedItemsControl Header="RadioButton">
        <RadioButton Margin="8">Normal</RadioButton>
        <RadioButton Margin="8" IsChecked="true">Checked</RadioButton>
        <RadioButton Margin="8">Normal</RadioButton>
      </HeaderedItemsControl>
   
    </WrapPanel>
  </ScrollViewer>
</Window>

   
    
    
    
     


Use StackPanel to Hold RadioButtons

image_pdfimage_print


   
      
<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Use Radio Buttons" Height="300" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50*" />
            <ColumnDefinition Width="50*" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Margin="2">
            <RadioButton Margin="5">RadioButton</RadioButton>
            <RadioButton Margin="5">RadioButton</RadioButton>
            <RadioButton Margin="5">RadioButton</RadioButton>
            <RadioButton Margin="5">RadioButton</RadioButton>
        </StackPanel>
        <StackPanel Grid.Column="1" Margin="2">
            <RadioButton Margin="5">RadioButton</RadioButton>
            <RadioButton Margin="5">RadioButton</RadioButton>
            <RadioButton Margin="5">RadioButton</RadioButton>
            <RadioButton Margin="5">RadioButton</RadioButton>
        </StackPanel>
    </Grid>
</Window>

   
    
    
    
    
    
     


Circled Radio Buttons

image_pdfimage_print


   
      
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Page.Resources>
        <ControlTemplate x:Key="newradio" 
                         TargetType="{x:Type RadioButton}">
            <Border Name="border" BorderBrush="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                    Padding="10"
                    CornerRadius="100">
                <ContentPresenter />
            </Border>

            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="border"
                            Property="BorderThickness"
                            Value="3" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Page.Resources>

    <GroupBox Header="Options" FontSize="20pt">
        <StackPanel>
            <RadioButton Template="{StaticResource newradio}"
                         HorizontalAlignment="Center" 
                         Content="1" />
            <RadioButton Template="{StaticResource newradio}"
                         HorizontalAlignment="Center"
                         Content="2"
                         IsChecked="True" />
            <RadioButton Template="{StaticResource newradio}"
                         HorizontalAlignment="Center"
                         Content="3" />
        </StackPanel>
    </GroupBox>
</Page>

   
    
    
    
    
    
     


Color animate based on Radio Button Click event

image_pdfimage_print


   
      
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Background="{x:Static SystemColors.WindowBrush}"
      Name="page">

    <Page.Resources>
        <Style TargetType="{x:Type RadioButton}">
            <Setter Property="Margin" Value="6" />
        </Style>
    </Page.Resources>

    <StackPanel HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Background="{DynamicResource 
                                {x:Static SystemColors.ControlBrushKey}}">

        <RadioButton Content="Red">
            <RadioButton.Triggers>
                <EventTrigger RoutedEvent="RadioButton.Checked">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimation 
                                Storyboard.TargetName="page"
                                Storyboard.TargetProperty="Background.Color"
                                To="Red" Duration="0:0:1" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </RadioButton.Triggers>
        </RadioButton>

    </StackPanel>
</Page>