Click here to Skip to main content
15,868,006 members
Articles / Desktop Programming / WPF
Tip/Trick

WPF Popup Enumerated Button Control

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
24 Mar 2016CPOL4 min read 14.4K   178   6   2
WPF popup enumerated button control

Introduction

This is just a cute little control I created that when bound to an enumeration property, shows the name of the enumeration and current enumeration, using the Description Attribute if available. It is a ToggleButton that shows the other available states as buttons of the same size with IsChecked, and allows the other enumerations to be selected (only shows buttons for the non-selected enumerations). Fades after 10 seconds.

Basically, it is just a version of a ComboBox, I wanted something that would provide the current state that the program was in. Normally, the state would be automatically updated, but there had to be an override capability. Since it was more important as a state, the ComboBox would really not be as obvious, and uses some more space for the arrows, which I thought would be distracting. The reason it is so big is that the display is normally viewed from a distance, and probably the use will only get close to the display when making changes using the touch screen capability.

Image 1

Window showing the control in initial, not IsChecked, state.

Image 2

The ToggleButtion has been clicked to show the other enumeration values available.

Design

This control is implemented as a UserControl:

XML
<Grid Name="MainGrid">
 <ToggleButton Name="SelectedItemToggleButton"
               VerticalAlignment="Stretch"
               Style="{StaticResource TransparentIconToggleButtonStyle}"
               DataContext="{Binding Converter={popUpButtonSample:EnumBindingConverter}}"
               IsChecked="True">
  <StackPanel Grid.Row="2"
              Grid.Column="0"
              HorizontalAlignment="Right"
              Orientation="Vertical">
   <TextBlock Name="LabelTextBox"
              TextAlignment="Center" />
   <TextBlock FontSize="32"
              FontWeight="Black"
              Text="{Binding}"
              TextAlignment="Center" />
  </StackPanel>
 </ToggleButton>
 <Popup Name="PopupList"
        Height="Auto"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Opacity=".1"
        AllowsTransparency="True"
        HorizontalOffset="-4"
        IsOpen="{Binding IsChecked,
                         ElementName=SelectedItemToggleButton,
                         Converter={popUpButtonSample:IsFalseConverter},
                         Mode=TwoWay}"
        Opened="PopupList_OnOpened"
        Placement="Top"
        PlacementTarget="{Binding ElementName=SelectedItemToggleButton}"
        VerticalOffset="-2">
  <ItemsControl ItemsSource="{Binding Converter={popUpButtonSample:EnumBindingConverter}}">
   <ItemsControl.ItemTemplate>
    <DataTemplate>
     <Border Width="{Binding SizingControl.ActualWidth,
                             ElementName=ToggleBoxInstance}"
             Height="{Binding SizingControl.ActualHeight,
                              ElementName=ToggleBoxInstance}"
             Margin="{Binding SizingControl.Margin,
                              ElementName=ToggleBoxInstance}"
             Background="White"
             CornerRadius="4">
      <Border.Visibility>
       <MultiBinding Converter="{popUpButtonSample:IsEqualConverter}"
                     ConverterParameter="Collapsed:Visible">
        <Binding  />
        <Binding Converter="{popUpButtonSample:EnumDescriptionConverter}"
                 Path="DataContext"
                 RelativeSource="{RelativeSource AncestorType=ItemsControl}" />
       </MultiBinding>
      </Border.Visibility>
      <Button Margin="0"
              VerticalAlignment="Stretch"

              Click="ButtonBase_OnClick">
       <StackPanel HorizontalAlignment="Right"
                   Orientation="Vertical">
        <TextBlock Text="{Binding LabelText,
                                  ElementName=ToggleBoxInstance}"
                   TextAlignment="Center" />
        <TextBlock FontSize="32"
                   FontWeight="Black"
                   Text="{Binding}"
                   TextAlignment="Center" />
       </StackPanel>
      </Button>
     </Border>
    </DataTemplate>
   </ItemsControl.ItemTemplate>
  </ItemsControl>
 </Popup>
</Grid>

It has two basic elements, the ToggleButton, and the Popup. For this design the ToggleButton has a TextBlock on for the Content that describes what the type of state represented, and a TextBlock to display the current state.

There are a number of converters derived from IValueConverter and IMultiValueConverter. A big reason for this is that the string in the Description attribute is used to if a Description is specified.

IsFalseConverter

The IsFalseConverter is used in only one place, but is a lot more capable than used here since for this usage is only does a Boolean inverse. The associated ConverterHelper allows any value to the associated with bound true/false values using the ConverterParameter. This class is described in WPF Converter Helper Class.

EnumBindingConverter

The EnumBindingConverter allows a property of an enumerated type to be bound to both the SelectedItem and ItemsSource, and the converter will creates an string collection of enumerations, using the ToString() values or the Description attribute value if it is specified. Then converts the string value in the SelectedItem to the right enumerated value. This converter is descripted in the article Using DescriptionAttribute for enumerations bound to a WPF ComboBox.

IsEqualConverter

The IsEqualConverter checks is derived from the IMultiValueConverter. It also users the ConverterHelper to give it the flexibility of returning any value on true and false results. In this case it is bound to the control's Visibility property and a Visibility result is returned to Collapse the associated control if the currently selected enumerated value is equal to the ListItem's ItemsControl value.

EnumDescriptionConverter

The EnumDescriptionConverter was a converter that created for this project since I needed a way to display the enumeration Description Attribute for the name to use for the status. Uses a lot of the same code that was in the EnumBindingConverter. However it is simpler.

The Popup, which is set to IsOpened = true when the ToggleButton is in the IsChecked state, contains just an ItemsControl that will display Button controls the other available states. Each button is contained within a Border that is used to ensure all each Button is the width and height of the parent ToggleButton using binding to the ActualHeight and ActualWidth of the contained Button, and its Visibility is set to Collapsed if the currently selected state is the state that the Button would allow selection of. A MultiBinding is used because want the Visibility to be updated either because of the state associated with the Button, and the current state associated with the UserContol. MultiBindings are very useful in handling instances like this.

Since it is not intended to be used with a ViewModel, has code behind:

C#
private readonly PopupControlTimer _timer;

public ToggleBox()
{
 InitializeComponent();
 GetLabelName();
 DataContextChanged += delegate { GetLabelName(); };
 _timer = new PopupControlTimer(PopupList);
}

public string LabelText { get; private set; }

public ToggleButton SizingControl => SelectedItemToggleButton;

private void GetLabelName()
{
 if (DataContext == null) return;
 var valueType = DataContext.GetType();
 var valueDescription = (DescriptionAttribute[])valueType.
    GetCustomAttributes(typeof(DescriptionAttribute), false);
 LabelText = (valueDescription.Length == 1) ? valueDescription[0].Description : valueType.Name;
 LabelTextBox.Text = LabelText;
}

private void PopupList_OnOpened(object sender, EventArgs e)
{
 _timer.Start();
}

private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
 var toggleButton = (Button)sender;
 DataContext = EnumDescriptionConverter.GetEnum(DataContext.GetType(), toggleButton.DataContext);
 SelectedItemToggleButton.IsChecked = false;
}

Using the Control

Something I did not think about when I originally created this, and did not realize it was not working because on the code where I put this, I had not acutally hooked up the ICommand to really do something, is that Binding needs to have the Mode set to TwoWay:

XML
<local:ToggleBox Width="200"
                 Height="100"
                 DataContext="{Binding PhaseType,
                                       Mode=TwoWay}" />

History

  • 03/24/16: Initial version
  • 03/27/16: Description Update
  • 07/12/16: Fix binding issue in sample, Need TwoWay binding.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Clifford Nelson Consulting
United States United States
Has been working as a C# developer on contract for the last several years, including 3 years at Microsoft. Previously worked with Visual Basic and Microsoft Access VBA, and have developed code for Word, Excel and Outlook. Started working with WPF in 2007 when part of the Microsoft WPF team. For the last eight years has been working primarily as a senior WPF/C# and Silverlight/C# developer. Currently working as WPF developer with BioNano Genomics in San Diego, CA redesigning their UI for their camera system. he can be reached at qck1@hotmail.com.

Comments and Discussions

 
QuestionSome Feedback Pin
Kevin Marois25-Mar-16 4:29
professionalKevin Marois25-Mar-16 4:29 
AnswerRe: Some Feedback Pin
Clifford Nelson25-Mar-16 8:19
Clifford Nelson25-Mar-16 8:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.