Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here is a very basic template for an Outlook 2010 task button, which was created in Expression Blend. I separated the template as a window resource. But notice that the image and text are hard-coded into the markup. To use this template, you will need to either incorporate it into each button you declare, as a separate control template for that button, or you will need to create a custom control with appropriate properties to which you can bind.</p> <p>Note also that I haven't created triggers. To emulate an Outlook 2010 button, the default state should be borderless--the border and glass effects should appear for a mouse-over, a mouse-press, and so on. Nonetheless, the template shows how to get the Outlook 2010 look.</p> <p>You can check out the button by creating a new WPF project and replacing the Window1 markup with the markup below.</p> <pre><code>&lt;Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Outlook_2010_Task_Button.MainWindow" x:Name="Window" Title="MainWindow" Width="640" Height="480" Background="#FFB7C9E0"&gt; &lt;Window.Resources&gt; &lt;ControlTemplate x:Key="TaskButtonTemplate" TargetType="{x:Type RadioButton}"&gt; &lt;Border x:Name="OuterBorder" Width="150" Height="28" BorderBrush="#FF59697F" BorderThickness="0.75" Background="#FFB0C8E2" Opacity="0.85" SnapsToDevicePixels="False"&gt; &lt;Border.Effect&gt; &lt;DropShadowEffect BlurRadius="3" Opacity="0.1"/&gt; &lt;/Border.Effect&gt; &lt;Border x:Name="InnerBorder" BorderBrush="White" BorderThickness="0.75" Background="{x:Null}" Opacity="0.75" SnapsToDevicePixels="False"&gt; &lt;Grid&gt; &lt;Border x:Name="Glow" Margin="0.999,0,-0.999,0" Grid.Row="0" Grid.RowSpan="2" BorderBrush="Black" BorderThickness="0"&gt; &lt;Border.Background&gt; &lt;RadialGradientBrush Center="0.494,0.98" GradientOrigin="0.494,0.98" RadiusX="0.56" RadiusY="1.018"&gt; &lt;GradientStop Color="#CCFFFFFF"/&gt; &lt;GradientStop Offset="1"/&gt; &lt;/RadialGradientBrush&gt; &lt;/Border.Background&gt; &lt;/Border&gt; &lt;Border x:Name="Shine" Margin="0" BorderBrush="Black" BorderThickness="0" Grid.RowSpan="2"&gt; &lt;Border.Background&gt; &lt;LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"&gt; &lt;GradientStop Color="#87FFFFFF" Offset="0"/&gt; &lt;GradientStop Offset="0.319"/&gt; &lt;/LinearGradientBrush&gt; &lt;/Border.Background&gt; &lt;/Border&gt; &lt;StackPanel HorizontalAlignment="Left" Margin="0" Grid.RowSpan="2" Orientation="Horizontal"&gt; &lt;Image Height="24" HorizontalAlignment="Left" Margin="4,0,0,0" Source="calendar.png"/&gt; &lt;TextBlock Text="Calendar" HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Segoe UI" FontWeight="Bold" Margin="9,0,0,0" Foreground="#FF001955" /&gt; &lt;/StackPanel&gt; &lt;/Grid&gt; &lt;/Border&gt; &lt;/Border&gt; &lt;/ControlTemplate&gt; &lt;/Window.Resources&gt; &lt;Grid x:Name="LayoutRoot"&gt; &lt;RadioButton HorizontalAlignment="Center" VerticalAlignment="Center" Content="RadioButton" Template="{DynamicResource TaskButtonTemplate}"/&gt; &lt;/Grid&gt; &lt;/Window&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload