#506 – Using a ComboBox as GroupBox Header
March 2, 2012 9 Comments
Because the GroupBox.Header property can be set to any object, you could host a control in the header of the GroupBox. In the example below, we specify a ComboBox for the Header and then bind the various fields to the selected item.
<GroupBox Margin="15"> <GroupBox.Header> <ComboBox Name="cboDogs" ItemsSource="{Binding Dogs}" DisplayMemberPath="Name" SelectedIndex="0" SelectedValue="{Binding SelectedDog}" SelectedValuePath=""/> </GroupBox.Header> <Grid Margin="10" DataContext="{Binding SelectedDog}"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" Content="Name:" FontWeight="Bold" HorizontalAlignment="Right"/> <Label Grid.Row="0" Grid.Column="1" Content="{Binding Name}"/> <Label Grid.Row="1" Grid.Column="0" Content="Age:" FontWeight="Bold" HorizontalAlignment="Right"/> <Label Grid.Row="1" Grid.Column="1" Content="{Binding Age}" /> <Label Grid.Row="2" Grid.Column="0" Content="Hobby:" FontWeight="Bold" HorizontalAlignment="Right"/> <Label Grid.Row="2" Grid.Column="1" Content="{Binding Hobby}"/> </Grid> </GroupBox>
public partial class Window1 : Window, INotifyPropertyChanged { public Window1() { InitializeComponent(); this.DataContext = this; Dogs = new ObservableCollection<Dog>(); Dogs.Add(new Dog("Lassie", 12, "Saving people")); Dogs.Add(new Dog("Rin Tin Tin", 52, "War dog")); Dogs.Add(new Dog("Benji", 18, "Befriends strays")); OnPropertyChanged("Dogs"); } public ObservableCollection<Dog> Dogs { get; protected set; } private Dog selectedDog; public Dog SelectedDog { get { return selectedDog; } set { if (value != selectedDog) { selectedDog = value; OnPropertyChanged("SelectedDog"); } } } public event PropertyChangedEventHandler PropertyChanged = delegate { }; private void OnPropertyChanged(string prop) { PropertyChanged(this, new PropertyChangedEventArgs(prop)); } }