Reputation: 443
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.
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