时间戳

首页 > 解决方案 > 如何垂直对齐 XAML UWP 复选框

xaml - 如何垂直对齐 XAML UWP 复选框

问题描述

我正在尝试垂直对齐复选框。实际的框出现在顶部。我希望它出现在中间。

这是 XAML：

  <CheckBox FontSize="100" Content="Test" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" HorizontalContentAlignment="Center"/>

这是它的样子：

在此处输入图像描述

我在 SO 上看到过类似的问题，但答案是使用 VerticalContentAlignment。这不起作用。一些答案建议使用不缩放的负填充或边距。所以请不要标记为重复，这还没有真正得到回答。或者也许它是为 WPF 回答的，但不是为 UWP 回答的。

我知道您可以更改控件的样式，但是对于应该开箱即用的东西来说，这是很多工作。

我正在使用 VS 2019 16.6.2 和 UWP v6.2.10

更新

这就是我希望我的 CheckBox 看起来的样子。

垂直对齐复选框

标签： xamluwp

解决方案

如何垂直对齐 XAML UWP 复选框

对于需求，更好的方法是修改复选框的默认布局。默认布局是Column，我们需要将其更改为Row. 我将分享样式的一部分，您可以直接使用它。

<Grid
    x:Name="RootGrid"
    Background="{TemplateBinding Background}"
    BorderBrush="{TemplateBinding BorderBrush}"
    BorderThickness="{TemplateBinding BorderThickness}"
    CornerRadius="{TemplateBinding CornerRadius}"
    >
    <Grid.RowDefinitions>
        <RowDefinition Height="32" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid
        Height="32"
        HorizontalAlignment="Center"
        VerticalAlignment="Top"
        >
        <Rectangle
            x:Name="NormalRectangle"
            Width="20"
            Height="20"
            Fill="{ThemeResource CheckBoxCheckBackgroundFillUnchecked}"
            Stroke="{ThemeResource CheckBoxCheckBackgroundStrokeUnchecked}"
            StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}"
            UseLayoutRounding="False"
            />
        <FontIcon
            x:Name="CheckGlyph"
            FontFamily="{ThemeResource SymbolThemeFontFamily}"
            FontSize="20"
            Foreground="{ThemeResource CheckBoxCheckGlyphForegroundUnchecked}"
            Glyph="&#xE001;"
            Opacity="0"
            />
    </Grid>
    <ContentPresenter
        x:Name="ContentPresenter"
        Grid.Row="1"
        Margin="{TemplateBinding Padding}"
        HorizontalAlignment="Center"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        AutomationProperties.AccessibilityView="Raw"
        Content="{TemplateBinding Content}"
        ContentTemplate="{TemplateBinding ContentTemplate}"
        ContentTransitions="{TemplateBinding ContentTransitions}"
        TextWrapping="Wrap"
        />

完整样式请参考此链接。

更新 如果不想编辑默认样式，我们可以自定义复选框，并在 OnApplyTemplate方法中编辑布局。

public class CustomCheckBox : CheckBox
{
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        var normalRectangle = GetTemplateChild("NormalRectangle") as Rectangle;
        var rootGrid = normalRectangle.Parent as Grid;
        Grid.SetColumnSpan(rootGrid, 2);
        rootGrid.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
        var contentPresenter = GetTemplateChild("ContentPresenter") as ContentPresenter;
        Grid.SetColumn(contentPresenter, 0);
        Grid.SetColumnSpan(contentPresenter, 2);
        contentPresenter.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;

    }

}

用法

<local:CustomCheckBox FontSize="100" Content="Test"  VerticalAlignment="Center" HorizontalAlignment="Center" />

更新 1

使用以下内容替换OnApplyTemplate内容。

var normalRectangle = GetTemplateChild("NormalRectangle") as Rectangle;
var rootGrid = normalRectangle.Parent as Grid;
Grid.SetColumnSpan(rootGrid, 2);
rootGrid.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left
rootGrid.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;

推荐阅读