WPF Custom Controls – toggle buttons with Group

4 בOctober 2015

אין תגובות

The idea is quite simple , create header of ListBox who combine two types of contents,

to be acting like an tab control , meaning filtering the Listbox content,

image

and

image

So , for implementation we can considerate a few options, Tabcontrol , RadioButtons , Toggle Button etc..

Just for the fun I have made it with toggles, the truth is I where must use them because of look an fill demands and styling but this is not the point,

The point is what between RadioButton control and ToggleButton control, the main issue is the group who might surround the radio buttons and auto switch them on and off when the other one got selected, since we have a command for pressing and activate the filter on the presented list, and also we have the IsChecked property for the UI appearance,

The only thing we need to do is to Assimilate ToggleButton inside The RadioButton template

So the solution is pure Xaml:

<Grid   Grid.Row="0" Grid.Column="1">

          <Grid.ColumnDefinitions>

              <ColumnDefinition Width="1*" />

              <ColumnDefinition  Width="1*"/>

          </Grid.ColumnDefinitions>

          <Grid.RowDefinitions>

              <RowDefinition Height="0.5*"/>

              <RowDefinition Height="10*"/>

          </Grid.RowDefinitions>


<RadioButton  Grid.Column="0" Grid.Row="0" GroupName="tablike">

              <RadioButton.Template>

                  <ControlTemplate>

                      <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" VerticalAlignment="Stretch"  Command="{Binding FilterACommand}" Content="A">

ToggleButton>

                  </ControlTemplate>

              </RadioButton.Template>

          </RadioButton>


          <RadioButton Grid.Column="1" Grid.Row="0" GroupName="tablike">

              <RadioButton.Template>

                  <ControlTemplate>

                      <ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" VerticalAlignment="Stretch"  Command="{Binding FilterBCommand}"  }"  Content="B"></ToggleButton>

                  </ControlTemplate>

              </RadioButton.Template>

          </RadioButton>


          <ListBox IsSynchronizedWithCurrentItem="True" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"

                ItemsSource="{Binding Data}"

                SelectedValue="{Binding SelectedReport, UpdateSourceTrigger=PropertyChanged}"

    HorizontalAlignment="Stretch" VerticalAlignment="Stretch"    />

      </Grid>

This code is just work, you may need resource files for styling but it is out from the scope here.

הוסף תגובה
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *