logo标签列表

如何在WPF的ListBoxItem中居中显示CheckBox？

wpflistboxcheckbox
4

我有一个使用了ItemContainerStyle的ListBox。我尝试了我能想到的一切方法来使一个复选框控件在垂直和水平方向居中对齐。有任何想法吗？

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

复选框会得到这种样式：

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

非常感谢所有尝试帮助我解决这个问题的人！

可编辑和不可编辑看起来是什么样的？ - Donnelle
5个回答
2
尝试将 ListBox 上的 ScrollViewer.HorizontalScrollBarVisibility 属性设置为 "Disabled"。这会强制项目容器具有固定宽度；否则，它们可以具有任何水平大小，并且无法合理计算水平对齐方式。
垂直对齐应该是修改 ListBoxItem 样式的问题，如 Donnelle 的答案所述。
编辑：在您的代码片段中，CheckBox 位于 Grid 中，Grid 又位于 DockPanel 中，DockPanel 又位于 Border 中。您到底要居中哪个元素？您确定其他元素不会干扰吗？这是我的建议和 HorizontalContentAlignment="Center"，并且只有数据模板中的复选框：
一个更改：我粘贴了您的网格/停靠面板/边框，正如它们在您粘贴的片段中所出现的那样，结果完全相同-水平居中的项。
尝试过了，没有变化。也许我只是不够幸运？ - Dave Lowther
0
我也曾经遇到过同样的问题。你是否尝试直接在样式中设置ListBoxItem的“HorizontalAlignment”属性呢？（而不是HorizontalContentAlignment）
尝试使用HorizontalAlignment=Center和Stretch，但都没有任何效果。 - Dave Lowther
0

你尝试过在ListBox本身上将HorizontalContentAlignment设置为“Stretch”吗？我相信这是必要的，以使每个ListBoxItem填充ListBox的宽度。

尝试使用HorizontalContentAlignment=Center和Stretch，但都没有任何效果。 - Dave Lowther
0

在ListBoxItem样式上设置高度--而不是复选框--可以实现我认为你想要的效果。

0
复选框对齐在左上角。为了快速简单，我已经更新了复选框的边距为4,3,0,0，行高为20。根据您的行高和是否需要左侧缓冲区，可能需要进行调整。如果您没有时间编写自己的模板或使用其他控件/容器，则可以使用margin属性来解决奇怪的格式问题。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接