CoderForHire
CoderForHire

Reputation: 443

Issue creating a WPF SplitButton

I am trying to create a WPF splitbutton. I know there are libraries out there that contain splitbuttons, but I'm trying to learn to make custom controls.

Here's my XAML:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:pres="clr-namespace:System.Windows.Media;assembly=PresentationCore"
                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
                    xmlns:ctrl="clr-namespace:Learning.Controls.SplitButton">

    <sys:Double x:Key="MainIconHeight">15</sys:Double>
    <sys:Double x:Key="MainIconWidth">15</sys:Double>

    <sys:Double x:Key="ArrowIconHeight">8</sys:Double>
    <sys:Double x:Key="ArrowIconWidth">10</sys:Double>

    <Style TargetType="{x:Type ctrl:SplitButton}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type ctrl:SplitButton}">

                    <Grid>

                        <Border x:Name="border"
                                Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Margin="{TemplateBinding Margin}"
                                Padding="{TemplateBinding Padding}"
                                CornerRadius="0">

                            <Border Margin="2"
                                    Background="{TemplateBinding Background}">

                                <Grid HorizontalAlignment="Stretch"
                                      VerticalAlignment="Center">   

                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <Button Grid.Column="0"
                                            Background="{TemplateBinding Background}"
                                            Height="{TemplateBinding Height}"
                                            BorderBrush="Transparent"
                                            BorderThickness="0"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Center"
                                            Margin="-1,0,-1,0">

                                        <Grid>

                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>

                                            <Path Grid.Column="0" 
                                                  Height="{StaticResource MainIconHeight}"
                                                  Width="{StaticResource MainIconHeight}"
                                                  Data="M22 6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6M20 6L12 11L4 6H20M20 18H4V8L12 13L20 8V18Z"
                                                  Stretch="Fill"
                                                  Stroke="Green"
                                                  StrokeThickness="0"
                                                  Fill="SteelBlue"
                                                  Margin="1,1,3,1"
                                                  HorizontalAlignment="Center"
                                                  VerticalAlignment="Center"/>

                                            <ContentPresenter Grid.Column="1"
                                                              HorizontalAlignment="Center"
                                                              VerticalAlignment="Center"
                                                              RecognizesAccessKey="True" />

                                        </Grid>

                                    </Button>

                                    <Button Grid.Column="1"
                                            Command="{Binding OpenCommand, RelativeSource={RelativeSource TemplatedParent}}"
                                            Background="{TemplateBinding Background}"
                                            BorderBrush="Transparent"
                                            Margin="-1">

                                        <Path Height="{StaticResource ArrowIconHeight}"
                                              Width="{StaticResource ArrowIconWidth}"
                                              Data="M5.016 0 0 .003 2.506 2.5 5.016 5l2.509-2.5L10.033.003 5.016 0z"
                                              Stretch="Fill"
                                              Stroke="Transparent"
                                              Fill="Gray"
                                              Margin="1"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center"/>

                                    </Button>
                                
                                </Grid>

                            </Border>

                        </Border>

                        <!--THE POPUP DOES NOT SHOW UP-->
                        <Popup x:Name="Popup"
                                Placement="Top"
                                PlacementTarget="{Binding ElementName=border}"
                                IsOpen="{Binding IsButtonOpen, RelativeSource={RelativeSource TemplatedParent}}"
                                AllowsTransparency="False"
                                Focusable="False"
                                PopupAnimation="Slide"
                                Height="200"
                                Width="200">

                            <Border x:Name="DropDownBorder"
                                        MinWidth="{TemplateBinding ActualWidth}"
                                        Height="90"
                                        Background="Red"
                                        BorderBrush="SteelBlue"
                                        BorderThickness="1">

                            </Border>

                        </Popup>

                    </Grid>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

</ResourceDictionary>

And here's the code behind so far:

public class SplitButton : Button
{
    private bool _IsButtonOpen = false;
    public bool IsButtonOpen
    {
        get { return _IsButtonOpen; }
        set { _IsButtonOpen = value; }
    }

    public ICommand OpenCommand { get; set; }

    #region CTOR
    public SplitButton()
    {
        OpenCommand = new RelayCommand(p => OpenClicked());
    }
    static SplitButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(SplitButton),
            new FrameworkPropertyMetadata(typeof(SplitButton)));

    }
    #endregion


    private void OpenClicked()
    {
        IsButtonOpen = !IsButtonOpen;
    }
}

When I run it, I can see both the main and arrow buttons. When I click the arrow button, nothing happens.

Here's a screen shot: enter image description here

I'm sure it has to do with the Popup somehow. Can someone shed some light on what I'm doing wrong?

Thanks

Upvotes: 0

Views: 49

Answers (0)

Related Questions