拉伸和中心对齐？答案

【问题标题】：Stretch and Center Alignment?拉伸和中心对齐？
【发布时间】：2013-10-02 22:05:36
【问题描述】：

我正在使用水平ListBox（可能有更好的方法）制作一种导航栏，原因是我需要一次只能选择一个东西，并让它保持选中状态，然后能够取消选择它。所以为了完成这项工作，我使用了ToggleButton。

问题是，我“拉伸”内容以适合框，以便我可以单击选择区域中的任意位置以使用切换按钮取消选择。

我的问题是我的按钮现在由于拉伸而顶部对齐，是否可以在使用拉伸时将它们垂直居中？每当我尝试将它们同时居中时，它都会让我回到方形按钮本身再次缩小到中心的位置。

<ListBox Grid.Row="0" Grid.Column="0" ItemsSource="{Binding PageViewModels}" SelectedItem="{Binding CurrentPageViewModel}" Style="{StaticResource MenuStyle}">
        <ListBox.ItemContainerStyle>
            <Style TargetType="{x:Type ListBoxItem}">
                <Setter Property="Padding" Value="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ListBoxItem}">
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="#FCCC"/>
                                </Trigger>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Background" Value="#FAAA"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>

        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid>
                <ToggleButton VerticalAlignment="Stretch"
                            Content="{Binding Name}"
                            IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"
                            Style="{StaticResource BlankButtonStyle}"
                            />
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

这可能是一个非常愚蠢的问题，但它确实困扰着我，我有点卡住了。

【问题讨论】：

标签： wpf xaml vertical-alignment

【解决方案1】：

您可以使用 VerticalContentAlignment 属性。

<Style TargetType="{x:Type ListBoxItem}">
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    ...

【讨论】：

【解决方案2】：

所以我可以通过简单地将 TextBlock 添加到 ListItem 模板来解决这个问题。

我可以将现在空白的 ToggleButton 拉伸到 ListItem 的完整大小，然后居中/对 TextBlock 执行任何操作。

这不是一个理想的实现，但它是我目前能想到的最好的实现。

<ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
            <TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" />
            <ToggleButton VerticalAlignment="Stretch"
                        Content=""
                        IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"
                        Style="{StaticResource BlankButtonStyle}"
                        />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>

【讨论】：