How to center WPF CheckBox inside ListBoxItem

Question

I have a ListBox that uses an ItemContainerStyle. I tried everything I can think of to make the CheckBox control center vertically and horizontally. Any ideas?

<ListBox IsSynchronizedWithCurrentItem="True" Height="Auto" Width="Auto" DockPanel.Dock="Top" ItemContainerStyle="{StaticResource lbcStyle}" /> <Style TargetType="ListBoxItem" x:Key="lbcStyle"> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="ContentTemplate" Value="{StaticResource editable}"/> </Trigger> </Style.Triggers> <Setter Property="ContentTemplate" Value="{StaticResource nonEditable}"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> '//i have tried stretch here also <Setter Property="VerticalContentAlignment" Value="Stretch"/> </Style> 

CheckBoxes gets this style:

 <Style x:Key="editorCheckBox" TargetType="{x:Type CheckBox}"> <Setter Property="MinWidth" Value="67" /> <Setter Property="Height" Value="25" /> <Setter Property="Margin" Value="5,0,5,0" /> <Setter Property="VerticalAlignment" Value="Center" /> <Setter Property="HorizontalAlignment" Value="Center" /> </Style> 

Here you can edit or edit:

 <DataTemplate x:Key="editable"> <Border x:Name="brdEditable" Width="Auto" HorizontalAlignment="Stretch"> <DockPanel x:Name="dpdEditable" LastChildFill="True" Width="Auto" Height="Auto"> <Grid x:Name="grdEditable" Width="Auto" Height="Auto"> <Grid.ColumnDefinitions> <ColumnDefinition Width="25" /> <ColumnDefinition Width="25" /> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> <ColumnDefinition Width="80" /> <ColumnDefinition Width="110" /> <ColumnDefinition Width="110" /> <ColumnDefinition Width="60" /> <ColumnDefinition Width="90" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition></RowDefinition> <RowDefinition></RowDefinition> </Grid.RowDefinitions> '... <CheckBox x:Name="chkActive" Grid.Column="7" Height="25" Style="{StaticResource editorCheckBox}" ToolTip="Is Construction Active?" IsEnabled="true" Validation.ErrorTemplate="{StaticResource validationTemplate}"> <CheckBox.IsChecked> <Binding Path="Active"> <Binding.ValidationRules> <DataErrorValidationRule></DataErrorValidationRule> <ExceptionValidationRule></ExceptionValidationRule> </Binding.ValidationRules> </Binding> </CheckBox.IsChecked> </CheckBox> '... <ContentControl Name="ExpanderContent" Visibility="Collapsed" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="14"></ContentControl> </Grid> </DockPanel> </Border> </DataTemplate> <DataTemplate x:Key="nonEditable"> <Border x:Name="brdNonEditable" Width="Auto" HorizontalAlignment="Stretch"> <DockPanel Width="Auto" Height="25"> <Grid Width="Auto" Height="25"> <Grid.ColumnDefinitions> <ColumnDefinition Width="25" /> <ColumnDefinition Width="25" /> <ColumnDefinition Width="100" /> <ColumnDefinition Width="100" /> <ColumnDefinition Width="80" /> <ColumnDefinition Width="110" /> <ColumnDefinition Width="110" /> <ColumnDefinition Width="60" /> <ColumnDefinition Width="90" /> </Grid.ColumnDefinitions> <CheckBox x:Name="chkActive" Grid.Column="7" Height="25" Style="{StaticResource editorCheckBox}" ToolTip="Is Construction Active?" IsEnabled="false" Validation.ErrorTemplate="{StaticResource validationTemplate}"> <CheckBox.IsChecked> <Binding Path="Active"> <Binding.ValidationRules> <DataErrorValidationRule></DataErrorValidationRule> <ExceptionValidationRule></ExceptionValidationRule> </Binding.ValidationRules> </Binding> </CheckBox.IsChecked> </CheckBox> <Label Content="calCompDate" Style="{StaticResource editorLabelList}" Grid.Column="8" ToolTip="{Binding Path= CompDate}" /> </Grid> </DockPanel> </Border> </DataTemplate> 

And so thanks to everyone who tried to help me solve this problem.

Answer 1

Try setting the ScrollViewer.HorizontalScrollBarVisibility property to "Disabled" in the ListBox. This makes item containers have a fixed width; otherwise, they can be of any horizontal size, and horizontal alignment cannot be reasonably calculated.

Vertical alignment should be due to a change in the ListBoxItem style according to Donnelle's answer.

Edit: in your code snippets, the CheckBox is inside the grid that is inside the DockPanel inside the border. What element are you trying to center exactly? Are you sure everyone else is not interfering? Here's what it looks like for me with my proposal and HorizontalContentAlignment = "Center", and only a checkbox in the data template:

One more edit: I copy / paste your grid / dock / border just like they appear in the fragments you pasted, and the result is exactly the same: the elements are located horizontally.

Answer 2

I had the same problem. Have you tried setting the "HorizontalAlignment" directly to the ListBoxItem in style? (not HorizontalContentAlignment)

Answer 3

Have you tried setting the HorizontalContentAlignment to "Stretch" in the ListBox itself? I believe it is necessary for each ListBoxItem to fill the width of the ListBox.

Answer 4

Setting a ListBoxItem-style height — rather than a checkbox — does what I think you need.

Answer 5

The checkbox is located at the top left. For quick and dirty, I updated the margin on the checkbox to 4,3,0,0 in a row with a height of 20. May require adjustments depending on the height of your row, and if you want the buffer to be on the left. The margin attribute can lead you out of situations of an odd format if you do not have time to write your own template or use other controls / containers.