Jaa


PowerPoint-like buttons in XAML/WPF

Someone posted a question to a discussion group asking for a way to create buttons like those in PowerPoint 2007 using XAML.

Below is my first attempt.

Button

<UserControl x:Class="TestApp.TestButton"

   xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

   xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

   Height="100" Width="300">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="40" />

            <ColumnDefinition Width="*" />

            <ColumnDefinition Width="40" />

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="40" />

            <RowDefinition Height="*" />

            <RowDefinition Height="40" />

        </Grid.RowDefinitions>

        <Rectangle Grid.RowSpan="3" Grid.ColumnSpan="3" RadiusX="20" RadiusY="20">

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                    <GradientStop Color="LightGreen" Offset="0" />

                    <GradientStop Color="Green" Offset="1" />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <Rectangle Grid.Row="2" Grid.RowSpan="1" Grid.ColumnSpan="3" RadiusX="20" RadiusY="20">

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

          <GradientStop Color="#0000" Offset=".5" />

                    <GradientStop Color="#3000" Offset="1" />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <Rectangle Grid.Row="0" Grid.RowSpan="3" Grid.ColumnSpan="1" RadiusX="20" RadiusY="20">

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

                    <GradientStop Color="#0000" Offset=".5" />

                    <GradientStop Color="#3000" Offset="0" />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <Rectangle Grid.Column="2" Grid.RowSpan="3" Grid.ColumnSpan="1" RadiusX="20" RadiusY="20">

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

                    <GradientStop Color="#0000" Offset=".5" />

                    <GradientStop Color="#3000" Offset="1" />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <Rectangle Grid.RowSpan="1" Grid.ColumnSpan="3" RadiusX="20" RadiusY="20" >

            <Rectangle.Fill>

                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                    <GradientStop Color="PaleGreen" Offset="0" />

                    <GradientStop Color="#0fff" Offset=".5" />

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

        <Rectangle Grid.RowSpan="3" Grid.ColumnSpan="3" RadiusX="20" RadiusY="20" StrokeThickness="2">

            <Rectangle.Stroke>

                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">

                    <GradientStop Color="#33006600" Offset="0" />

                    <GradientStop Color="#33003300" Offset="1" />

                </LinearGradientBrush>

            </Rectangle.Stroke>

        </Rectangle>

    </Grid>

</UserControl>