Как сделать так, чтобы глипы перекрывались в разных размерах - PullRequest
Новая
       7

Как сделать так, чтобы глипы перекрывались в разных размерах

0 голосов
/ 19 апреля 2020

Благодаря помощи мне удалось иметь 2 глипа в кнопке AppBar. Я хотел бы уменьшить второй (половину первого) и перекрывать его в левом нижнем углу ... но я не хочу использовать абсолютные числа, чтобы пользовательский интерфейс реагировал 

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

Как я могу это сделать?

1 Ответ

0 голосов
/ 20 апреля 2020

Извините, но я не создал проект UWP или не использовал панель приложений. Я создал проект 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 вокруг маленького глифа, так как это обеспечивает дополнительный контроль над этим глифом. то есть вы можете лучше управлять размещением и цветом фона.

...