Adding checkboxes to wpf listbox for multiple selection

Question

  <StackPanel Grid.Column="0" >
            <Button Name="buttonEditListBoxItem" Content="Edit" Click="buttonEditListBoxItem_Click"></Button>
            <ListBox  Name="ListBoxTriggers" 
                 SelectedValuePath="TriggerId" 
                 IsSynchronizedWithCurrentItem="True"
                 SelectionChanged="Triggers_SelectionChanged"
                 ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                 HorizontalContentAlignment="Stretch">
            <ListBox.ItemTemplate>
                <DataTemplate><Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="AUTO"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <CheckBox Grid.Column="0" VerticalAlignment="Center" x:Name="checkBoxTriggers" ></CheckBox>
                            <Button Grid.Column="1" Style="{StaticResource GlassButton}" 
                            Uid="{Binding Path=TriggerId}" 
                            Margin="5"
                           x:Name="ButtonTrigger"
                           GotFocus="ButtonTrigger_GotFocus"
                          >
                                <Button.Content>
                                    <TextBlock Foreground="White" TextAlignment="Justify"
                                       TextWrapping="Wrap" Margin="6"   Text="{Binding Path=Name}"/>
                                </Button.Content>
                            </Button>
                        </Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate></ListBox>

            </StackPanel>

I want to create a listbox with a data Template which includes a button and a checkbox . What i want to do is when i click on the Edit button these checkboxes should get visible and when i click it again i want to make those checkboxes invisible/collapsed

Answer:I have changed the code now to this: `

</Window.Resources>  <StackPanel Grid.Column="0" >
            <ToggleButton Name="buttonEditListBoxItem" 
                          Content="Edit" 
                          IsChecked="False"
                          Click="buttonEditListBoxItem_Click"></ToggleButton>
            <ListBox  Name="ListBoxTriggers" 
                 SelectedValuePath="TriggerId" 
                 IsSynchronizedWithCurrentItem="True"
                 SelectionChanged="Triggers_SelectionChanged"
                 ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                 HorizontalContentAlignment="Stretch">
            <ListBox.ItemTemplate>
                <DataTemplate>  <Grid >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="AUTO"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <CheckBox Visibility="{Binding ElementName=buttonEditListBoxItem, Path=IsChecked, Converter={StaticResource visibilityConverter}}" Grid.Column="0" VerticalAlignment="Center" x:Name="checkBoxTriggers" ></CheckBox>
                            <Button Grid.Column="1" Style="{StaticResource GlassButton}" 
                            Uid="{Binding Path=TriggerId}" 
                            Margin="5"
                           x:Name="ButtonTrigger"
                           GotFocus="ButtonTrigger_GotFocus"
                          >
                                <Button.Content>
                                    <TextBlock Foreground="White" TextAlignment="Justify"
                                       TextWrapping="Wrap" Margin="6"   Text="{Binding Path=Name}"/>
                                </Button.Content>
                            </Button>
                        </Grid>
                    </DataTemplate> </ListBox.ItemTemplate>
        </ListBox>` `public class VisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return ((Boolean)value) ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (((Visibility)value) == Visibility.Visible);
    }
}`

fixagon · Accepted Answer · 2011-02-25 17:06:39Z

1

the easiest way to achieve that is to use a togglebutton

example:

<ToggleButton  Name="Toggler">
</ToggleButton>
<StackPanel Visibility="{Binding ElementName=Toggler, Path=Checked, Converter={StaticResource booleanToVisibilityConverter}}">
<!-- in here you can place the checkboxes-->
</StackPanel>

you just have to create a valueconverter which converts from boolean to the enumeration Visibility

another possibility is to use a "Popup" Element in combination with a ToggleButton (which gives the feeling of a small helper which pops up to edit the item and if StaysOpen="False" is set closes immediately on losing focus) If you use this approach you do not have to repress the edit button to hide the checkboxes

edited Feb 25, 2011 at 17:06

answered Feb 25, 2011 at 16:58

fixagon

5,56624 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

batrulz Over a year ago

Thanks for ur answer. I have added a ToggleButton and used its IsChecked property for the visibility converter to decide the visibility of the checkboxes.

batrulz Over a year ago

wanted to ask a follow up question.... if i have to use this as a control and use properties like buttonEditListBoxItem.isVisible=false.... do i convert this into a usercontrol / custom control so that i can use it in any window

decyclone · Accepted Answer · 2011-02-25 16:57:03Z

How about using ToggleButton instead of Button with VisibilityConverter:

<ListBox  Name="ListBoxTriggers"
            SelectedValuePath="TriggerId"
            IsSynchronizedWithCurrentItem="True"
            SelectionChanged="Triggers_SelectionChanged"
            ScrollViewer.HorizontalScrollBarVisibility="Auto"
            HorizontalContentAlignment="Stretch">
    <ListBox.Resources>
        <local:VisibilityConverter x:Key="VisibilityConverter" />
    </ListBox.Resources>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="AUTO" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <CheckBox Grid.Column="0"
                            VerticalAlignment="Center"
                            x:Name="checkBoxTriggers"
                            Visibility="{Binding ElementName=ButtonTrigger, Path=IsChecked, Converter={StaticResource VisibilityConverter}}"></CheckBox>
                <ToggleButton Grid.Column="1"
                                Uid="{Binding Path=TriggerId}"
                                Margin="5"
                                x:Name="ButtonTrigger"
                                GotFocus="ButtonTrigger_GotFocus">
                    <ToggleButton.Content>
                        <TextBlock Foreground="White"
                                    TextAlignment="Justify"
                                    TextWrapping="Wrap"
                                    Margin="6"
                                    Text="{Binding Path=Name}" />
                    </ToggleButton.Content>
                </ToggleButton>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

VisibilityConverter:

public class VisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return ((Boolean)value) ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        return (((Visibility)value) == Visibility.Visible);
    }
}

Thanks for ur answer. I have added a ToggleButton and used its IsChecked property for the visibility converter to decide the visibility of the checkboxes.
i dont want the button inside the template to decide the visibility of my checkboxes. there is a edit button outside the listbox based on which i want to decide. Thanks though ur answer did help.

Collectives™ on Stack Overflow

Adding checkboxes to wpf listbox for multiple selection

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related