时间戳

首页 > 解决方案 > 如何让 Glyps 以不同的大小重叠

xaml - 如何让 Glyps 以不同的大小重叠

问题描述

多亏了帮助，我才能在 AppBar Button 中有 2 个 glyp。我想让第二个更小（第一个的一半）并在左下角重叠......但我不想使用绝对数字来保持 UI 响应

    <AppBarToggleButton Label="" >
        <AppBarToggleButton.Content>
            <Grid>
                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xEC92;" />
                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF0AE;" />
            </Grid>
        </AppBarToggleButton.Content>
    </AppBarToggleButton>

我怎样才能做到这一点？

标签： xamluwpuwp-xaml

解决方案

抱歉，我还没有创建 UWP 项目或使用 AppBar。我创建了一个 UWP 项目并提出了以下两个想法：

<AppBarToggleButton>
    <AppBarToggleButton.Content>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <FontIcon Grid.Column="0"
                    Grid.Row="0"
                    Grid.RowSpan="2"
                    Grid.ColumnSpan="2"
                    FontSize="50"
                    FontFamily="Segoe MDL2 Assets"
                    Glyph="&#xEC92;" />

            <FontIcon Grid.Column="0"
                    Grid.Row="0"
                    Foreground="Transparent"
                    FontFamily="Segoe MDL2 Assets"
                    Glyph="&#xEC92;" />

            <FontIcon Grid.Column="1"
                    Grid.Row="0"
                    Foreground="Transparent"
                    FontFamily="Segoe MDL2 Assets"
                    Glyph="&#xEC92;" />
            <FontIcon Grid.Column="0"
                    Grid.Row="1"
                    Foreground="Transparent"
                    FontFamily="Segoe MDL2 Assets"
                    Glyph="&#xEC92;" />
            <StackPanel Grid.Column="0"
                    Grid.Row="1"
                    Background="White"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom">
                <FontIcon FontFamily="Segoe MDL2 Assets"
                        Glyph="&#xF0AE;" />
            </StackPanel>

        </Grid>
    </AppBarToggleButton.Content>
</AppBarToggleButton>


<AppBarToggleButton>
    <AppBarToggleButton.Content>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25" />
                <ColumnDefinition Width="25" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="25" />
                <RowDefinition Height="25" />
            </Grid.RowDefinitions>
            <FontIcon Grid.Column="0"
                    Grid.Row="0"
                    Grid.RowSpan="2"
                    Grid.ColumnSpan="2"
                    FontSize="50"
                    FontFamily="Segoe MDL2 Assets"
                    Glyph="&#xEC92;" />
            <StackPanel Grid.Column="0"
                    Grid.Row="1"
                    Background="White"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Bottom">
                <FontIcon FontFamily="Segoe MDL2 Assets"
                        Glyph="&#xF0AE;" />
            </StackPanel>

        </Grid>
    </AppBarToggleButton.Content>
</AppBarToggleButton>

这两个按钮都使用 2 列和 2 行的网格。这个想法是将大字形放在所有四个单元格中，将小字形放在左下角的单元格中。但是，根据您的想法，更复杂的网格可能会更好。

对于顶部按钮，我使用 * 尺寸。但是，要使网格正常工作，每个单元格都必须有一些内容，否则列或行将折叠。在这种情况下，我放置了相同的字形，但具有透明的前景。

对于底部按钮，我给每一行和每一列一个固定的大小。在这种情况下，不需要额外的字形 - 但您有固定的单元格大小。

在这两个按钮中，我在小字形周围放置了一个 StackPanel，因为这为这个字形提供了额外的控制。也就是说，您可以更好地控制放置，并且可以控制背景颜色。

推荐阅读