[C#/WINUI3/.NET6] InfoBadge 엘리먼트 : 다른 컨트롤 내부에 배치하기

■ InfoBadge 엘리먼트를 다른 컨트롤 내부에 배치하는 방법을 보여준다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Button Name="Example3Button"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Width="200"
        Height="60"
        Padding="0"
        ToolTipService.ToolTip="Refresh required"
        HorizontalContentAlignment="Stretch"
        VerticalContentAlignment="Stretch">
        <Grid
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Width="Auto"
            Height="Auto">
            <SymbolIcon
                HorizontalAlignment="Center"
                Symbol="Sync" />
            <InfoBadge
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Background="#c42b1c">
                <InfoBadge.IconSource>
                    <FontIconSource
                        FontFamily="{StaticResource SymbolThemeFontFamily}"
                        Glyph="&#xf13c;" />
                </InfoBadge.IconSource>
            </InfoBadge>
        </Grid>
    </Button>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Button Name="Example3Button"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="60"

Padding="0"

ToolTipService.ToolTip="Refresh required"

HorizontalContentAlignment="Stretch"

VerticalContentAlignment="Stretch">

<Grid

HorizontalAlignment="Stretch"

VerticalAlignment="Stretch"

Width="Auto"

Height="Auto">

<SymbolIcon

HorizontalAlignment="Center"

Symbol="Sync" />

<InfoBadge

HorizontalAlignment="Right"

VerticalAlignment="Top"

Background="#c42b1c">

<InfoBadge.IconSource>

<FontIconSource

FontFamily="{StaticResource SymbolThemeFontFamily}"

Glyph="" />

</InfoBadge.IconSource>

</InfoBadge>

</Grid>

</Button>

</Page>

TestProject.zip