How to resize a polygon in WPF?

Question

Hey all,

I'm working on my first WPF application and I'm testing out a custom control that is essential a circle with a play button drawn into the middle of it. I seem to have hit a bit of a hitch though. When I draw my play button I can't seem to get it to resize alongside the circle. Specifically, when I resize the circle to be wider or taller, the play button polygon remains the same size and in the same absolute position. Any pointer on setting up my XAML or code to correct this?

Existing XAML:

<Window x:Class="WPFTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:WPFTest">
    <StackPanel>
        <StackPanel.Resources>
            <Style TargetType="my:GradientButton">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type my:GradientButton}">
                            <Grid>
                                <Ellipse Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Stroke="{TemplateBinding Foreground}" VerticalAlignment="Top" HorizontalAlignment="Left">
                                    <Ellipse.Fill>
                                        <LinearGradientBrush>
                                            <GradientStop Color="{TemplateBinding GradientStart}" Offset="0"></GradientStop>
                                            <GradientStop Color="{TemplateBinding GradientEnd}" Offset="1"></GradientStop>
                                        </LinearGradientBrush>
                                    </Ellipse.Fill>
                                </Ellipse>
                                <Polygon Points="{TemplateBinding PlayPoints}" Fill="{TemplateBinding Foreground}" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>
        <my:GradientButton Content="Button" Height="50" x:Name="gradientButton1" Width="50" GradientStart="#FFCCCCCC" GradientEnd="#FFAAAAAA" PlayPoints="18,12 35,25 18,38" />
    </StackPanel>
</Window>

Code:

public class GradientButton : Button
    {
        internal static DependencyProperty GradientStartProperty;
        internal static DependencyProperty GradientEndProperty;
        internal static DependencyProperty PlayPointsProperty;

        static GradientButton()
        {
            GradientStartProperty = DependencyProperty.Register("GradientStart", typeof(Color), typeof(GradientButton));
            GradientEndProperty = DependencyProperty.Register("GradientEnd", typeof(Color), typeof(GradientButton));
            PlayPointsProperty = DependencyProperty.Register("PlayPoints", typeof(PointCollection), typeof(GradientButton));
        }

        public Color GradientStart
        {
            get { return (Color)base.GetValue(GradientStartProperty); }
            set { SetValue(GradientStartProperty, value); }
        }

        public Color GradientEnd
        {
            get { return (Color)base.GetValue(GradientEndProperty); }
            set { SetValue(GradientEndProperty, value); }
        }

        public PointCollection PlayPoints
        {
            get
            {
                //this is where I'm trying to make the resizing dynamic, but this property never seems to get hit when I put in a breakpoint?
                PointCollection result = new PointCollection();
                double top = this.Width / 2.778;
                double left = this.Width / 4.167;
                double middle = this.Height / 2.00;
                double right = this.Width / 1.429;
                double bottom = this.Height / 1.316;

                result.Add(new Point(left, top));
                result.Add(new Point(right, middle));
                result.Add(new Point(left, bottom));

                return result;
            }
            set { SetValue(PlayPointsProperty, value); }
        }
    }

Answer 1

You need to set the Stretch property of the Polygon to Uniform