Geek Answers Handbook

Creating an Option List Using MVVM

I have an ObservableCollection> property that I would like to display in a list box in a WPF window using the MVVM model. Ideally, I would like to have a list that has a flag for bool and a label for the row, and when the user changes the value of the flag, he will change the corresponding bool. What is the best way to do this?

+4
source share
3 answers

Idealism, if you want to follow the MVVM approach, all of your elements in the ObservableCollection must be ViewModel.

These viewModels must expose 2 properties, such as string Description and bool IsSelected .

Now you need to provide your ListBox with a style to display a checkbox and a text block for each DataModel with data support.

The following XAML implements this style. Note. The DataContext Usercontrol must contain a ViewModel containing the ObservableCollection<YourClass> Items { get; set; } ObservableCollection<YourClass> Items { get; set; } ObservableCollection<YourClass> Items { get; set; } , where YourClass provides a string Description { get; set; } string Description { get; set; } string Description { get; set; } and bool IsSelected { get; set; } bool IsSelected { get; set; } bool IsSelected { get; set; } . Obviously, you'll want to throw INotifyPropertyChanged magic INotifyPropertyChanged .

 <Grid> <Grid.Resources> <Style x:Key="CheckBoxListStyle" TargetType="ListBox"> <Style.Resources> <Style TargetType="ListBoxItem"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="ListBoxItem"> <StackPanel Orientation="Horizontal"> <CheckBox x:Name="itemChoix" Margin="5,5,0,0" IsChecked="{Binding IsSelected, Mode=TwoWay}" IsEnabled="{Binding IsEnabled, Mode=TwoWay}" /> <TextBlock Margin="5,5,0,0" Text="{Binding Description, Mode=TwoWay}" /> </StackPanel> </ControlTemplate> </Setter.Value> </Setter> </Style> </Style.Resources> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <WrapPanel Orientation="Vertical" /> </ItemsPanelTemplate> </Setter.Value> </Setter> <Setter Property="BorderThickness" Value="0" /> </Style> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="25"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Border Grid.Row="1" Style="{StaticResource BoxBorder}" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"> <Grid> <ListBox ItemsSource="{Binding Path=Items}" SelectionMode="Multiple" Style="{StaticResource CheckBoxListStyle}"/> </Grid> </Border> </Grid>
+2
source

Try using the ItemsControl element and don’t get attached to the list of checkboxes, define the model:

 <ItemsControl ItemsSource="{Binding YourModelList}"> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal"> <CheckBox IsChecked="{Binding Path=Selected}"/> <TextBlock Text="{Binding Path=Description}" /> </StackPanel> </ItemsPanelTemplate> </ItemsControl>

In ViewModel:

 public ObservbleCollection<YourModel> YourModelList { get; set; }

And the model:

 public class YourModel { public bool Selected {get;set;} public string Description {get;set;} public int ID {get;set;} }

Deploy INotifyPropertyChanged as needed

+3
source
  • Create your public ObservableCollection property in ViewModel
  • Create the IsSelected bool property.
  • Filling a collection from a constructor or team.
  • Create a command for the checkbox that sets the IsSelected property.
  • Make a Xaml Binding
0
source

More articles:


All Articles