WPF: Create half elliptical button

Question

I dont think this is quite possible, but its worth a shot to see what you guys say. I am trying to create a half-elliptical button in C# (not XAML, that might through another curve ball). If I wanted a pre-determined size for the buttons, I would just use images or something like that, but thats not the case since the size changes. Here is more detail:

1. I have an ellipse with x-radius and y-radius (or width and height, respectfully multiplied by 2).

2. I want two button to fill the entire ellipse, each taking up one half of the ellipse.

3. I dont want rectangular button that extend beyond the ellipse and get clipped to the parent, I want actual elliptical buttons, except only one-half of an ellipse per button.

4. If this cant be accomplished using buttons, but using some other control, then I'd like that control to be able to act like a button.

Any help or advice or pointers would greatly help.

Answer 1

Before I answer this, I'd love to know WHY you have to avoid XAML, in a WPF application? You would almost certainly be indirectly using XAML anyway, so why not use it - making your button should then be a piece of cake! That's exactly what it's for !

This is like trying to make a house with sticky-tape when you are standing next to bricks and mortar! :)

Answer 2

Use XAML, seriously XAML may look daunting at first but it's nothing like the headache you're creating for yourself by trying to do this purely in code behind.

Custom WPF Button Style

Step-by-Step Introduction to styling with Blend

XAML Level 100

Answer 3

You'll have to add additional triggers (like IsPressed), but this should give you a pretty good idea:

<Button Height="30" Width="30">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Path Name="HalfEllipse" Stroke="Black" StrokeThickness="1" Fill="Blue">
                            <Path.Data>
                                <PathGeometry>
                                    <PathFigure IsFilled="True" StartPoint="0,0">
                                        <PolyBezierSegment Points="5,30 25,30 30,0" />
                                    </PathFigure>
                                </PathGeometry>
                            </Path.Data>
                        </Path>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="HalfEllipse" Property="Fill">
                                    <Setter.Value>
                                        <SolidColorBrush Color="Green"/>
                                    </Setter.Value>
                                </Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Button.Style>
</Button>

See this page for more info: http://www.codeproject.com/KB/WPF/glassbuttons.aspx