How to have Glyps overlapped in different size

问题

Thanks to the help I was able to have 2 glyps in an AppBar Button. I would like to make the second one smaller (half of the first one) and be overlapping in the bottom left corner... but I do not want to use absolute numbers to keep the UI responsive

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

How can I do that?

回答1:

I'm sorry but I have not created a UWP project or use the AppBar. I created a UWP project and came up with these two ideas:

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

The both buttons use a grid of 2 columns and 2 rows. The idea is to put the large glyph in all four cells and the small glyph in the lower left cell. However, depending on what you have in mind, a more complex grid may work better.

For the top button, I used * sizes. However, for the grid to work correctly, every cell must have some content or the column or row will collapse. In this case, I placed the same glyph but with a transparent foreground.

For the bottom button, I gave each row and column a fixed size. in this case, the extra glyphs are not needed - but you have fixed cell sizes.

in both buttons, I placed a StackPanel around the small glyph as this provides additional control for this glyph. that is, you can better control placement and you can control the background color.

来源：https://stackoverflow.com/questions/61305902/how-to-have-glyps-overlapped-in-different-size

标签

xaml

uwp

uwp-xaml