如何在ListBoxItem中將WPF CheckBox居中

Question

我有一個使用ItemContainerStyle的ListBox。我已經嘗試了所有我能想到的方法來使CheckBox控件垂直和水平居中。有任何想法嗎？

<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> 

的CheckBox得到這個風格：

<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> 

下面是編輯/不可編輯：

<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> 

而且非常感謝大家誰曾試圖幫我解決這個！

Answer 1

我有同樣的問題。您是否嘗試過直接在樣式中的ListBoxItem上設置「Horizo​​ntalAlignment」？ （不Horizo​​ntalContentAlignment）

Answer 2

你有沒有嘗試設置Horizo​​ntalContentAlignment「拉伸」在列表框本身？我相信這是必要的，以使每個ListBoxItem填充ListBox的寬度。

Answer 3

設置ListBoxItem樣式的高度 - 而不是複選框 - 做我認爲你在追求的東西。

Answer 4

該複選框左上角對齊。對於一個快速而骯髒的問題，我已經將複選框的邊距更新爲行高度爲20的4,3,0,0。可能需要根據行高以及左側是否需要緩衝區來調整。如果您沒有時間編寫自己的模板或使用其他控件/容器，則margin屬性可以讓您擺脫奇數格式的情況。

Answer 5

嘗試將ListBox上的ScrollViewer.HorizontalScrollBarVisibility屬性設置爲"Disabled"。這迫使物品容器具有固定的寬度;否則，它們可以具有任何水平尺寸，並且不能合理計算水平對齊。

根據Donnelle的回答，垂直對齊應該是修改ListBoxItem樣式的問題。

編輯：在您的代碼片段中，CheckBox位於一個位於邊框內的DockPanel內的網格內。你試圖準確定位哪個元素？你確定其他人不會干涉嗎？下面是它的外觀，我與我的建議，並Horizo​​ntalContentAlignment =「中心」，只有在數據模板的複選框：

還有一個編輯：我複製/粘貼您的網格/ DockPanel中/邊界，正是因爲他們出現在你粘貼的片段，結果是正好相同 - 項目水平居中。