Question

我正在使用水平ListBox创建一种导航栏（可能有更好的方法），因为我需要一次只能选择一件事，让它保持选中状态能够取消选择它。因此，为了完成这项工作，我正在使用ToggleButton。

问题是，我'拉伸'要放入框中的内容，以便我可以点击选择区域中的任意位置以使用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>

这可能是一个非常愚蠢的问题，但它确实让我烦恼，我有点陷入困境。

Answer 1

所以我只需将一个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>

Answer 2

您可以使用VerticalContentAlignment属性。

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

拉伸和中心对齐？

2 个答案: