MARKUP EXTENSION Archives

[C#/WINUI3/.NET8] x:Bind 태그 확장 : FallbackValue 속성을 사용해 바인딩 실패시 기본값 설정하기

■ x:Bind 태그 확장의 FallbackValue 속성을 사용해 바인딩 실패시 기본값을 설정하는 방법을 보여준다. ▶ 예제 코드 (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">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Spacing="10">
        <CheckBox Name="checkBox"
            HorizontalAlignment="Center"
            Content="I agree to the terms of service." />
        <Button
            HorizontalAlignment="Center"
            Padding="10"
            Content="Submit"
            IsEnabled="{x:Bind (x:Boolean)checkBox.IsChecked, Mode=OneWay, FallbackValue=False}" />
    </StackPanel>
</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">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Spacing="10">

<CheckBox Name="checkBox"

HorizontalAlignment="Center"

Content="I agree to the terms of service." />

<Button

HorizontalAlignment="Center"

Padding="10"

Content="Submit"

IsEnabled="{x:Bind (x:Boolean)checkBox.IsChecked, Mode=OneWay, FallbackValue=False}" />

</StackPanel>

</Page>

[C#/WINUI3/.NET8] x:Bind 태그 확장 : Nullable 타입을 bool 타입으로 바인딩하기

■ x:Bind 태그 확장에서 Nullable<bool> 타입을 bool 타입으로 바인딩하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] NullableBool 태그 확장 : Value 속성을 사용해 NULL 가능한 BOOL 값 설정하기

■ NullableBool 태그 확장의 Value 속성을 사용해 NULL 가능한 BOOL 값을 설정하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] SymbolIconSource 태그 확장 : Symbol 속성을 사용해 심볼 아이콘 소스 만들기

■ SymbolIconSource 태그 확장의 Symbol 속성을 사용해 심볼 아이콘 소스를 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] SymbolIcon 태그 확장 : Symbol 속성을 사용해 심볼 아이콘 만들기

■ SymbolIcon 태그 확장의 Symbol 속성을 사용해 심볼 아이콘을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] FontIconSource 확장 태그 : Glyph 속성을 사용해 폰트 아이콘 소스 만들기

■ FontIconSource 확장 태그의 Glyph 속성을 사용해 폰트 아이콘 소스를 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] SymbolIcon 확장 태그 : Symbol 속성을 사용해 심볼 아이콘 만들기

■ SymbolIcon 확장 태그의 Symbol 속성을 사용해 심볼 아이콘을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] BitmapIcon 확장 태그 : Source 속성을 사용해 비트맵 아이콘 만들기

■ BitmapIcon 확장 태그의 Source 속성을 사용해 비트맵 아이콘을 만드는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트 파일에서

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] EnumValues 확장 태그 : Type 속성을 사용해 열거형 값 컬렉션 구하기

■ EnumValues 확장 태그의 Type 속성을 사용해 열거형 값 컬렉션을 구하는 방법을 보여준다. ※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다. ※ TestProject.csproj 프로젝트

[C#/WINUI3/COMMUNITY TOOLKIT/.NET8] FontIcon 확장 태그 : 폰트 아이콘 표시하기

■ FontIcon 확장 태그를 사용해 폰트 아이콘을 표시하는 방법을 보여준다. ※ 이 예제 코드에서 사용된 FontIcon 확장 태그는 CommunityToolkit.WinUI.Extensions 누겟(버전 : 8.0.240109)을

[C#/WINUI3/.NET6] x:Bind 태그 확장 : 실수 값을 정수 값으로 바인딩하기

■ x:Bind 태그 확장에서 실수 값을 정수 값으로 바인딩하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Rectangle
    Grid.Row="{x:Bind (x:Int32)rowSlider.Value, Mode=OneWay}"
    Grid.Column="{x:Bind (x:Int32)columnSlider.Value, Mode=OneWay}"
    Width="50"
    Height="50"
    Fill="Red" />

<Slider Name="rowSlider" />
<Slider Name="columnSlider" />

<Rectangle

Grid.Row="{x:Bind (x:Int32)rowSlider.Value, Mode=OneWay}"

Grid.Column="{x:Bind (x:Int32)columnSlider.Value, Mode=OneWay}"

Width="50"

Height="50"

Fill="Red" />

[C#/WPF] DynamicResource 태그 확장 : SystemParameters 클래스 정적 속성을 사용해 시스템 정보 설정하기

■ DynamicResource 태그 확장에서 SystemParameters 클래스 정적 속성을 사용해 시스템 정보 설정하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Orientation="Horizontal">
        <Button
            Width="100"
            Height="30"
            Content="{DynamicResource {x:Static SystemParameters.PrimaryScreenWidthKey}}" />
        <Button
            Margin="10 0 0 0"
            Width="100"
            Height="30"
            Content="{DynamicResource {x:Static SystemParameters.PrimaryScreenHeightKey}}" />
    </StackPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Orientation="Horizontal">

<Button

Width="100"

Height="30"

Content="{DynamicResource {x:Static SystemParameters.PrimaryScreenWidthKey}}" />

<Button

Margin="10 0 0 0"

Width="100"

Height="30"

Content="{DynamicResource {x:Static SystemParameters.PrimaryScreenHeightKey}}" />

</StackPanel>

</Window>

TestProject.zip

[C#/WPF] DynamicResource 태그 확장 : SystemFonts 클래스 정적 속성을 사용해 시스템 폰트 설정하기

■ DynamicResource 태그 확장에서 SystemFonts 클래스 정적 속성을 사용해 시스템 폰트를 설정하는 방법을 보여준다. ▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Style x:Key="SystemFontStyleKey" TargetType="{x:Type Button}">
            <Setter Property="FontFamily" Value="{DynamicResource {x:Static SystemFonts.CaptionFontFamilyKey}}" />
            <Setter Property="FontSize"   Value="{DynamicResource {x:Static SystemFonts.IconFontSizeKey     }}" />
            <Setter Property="FontWeight" Value="{DynamicResource {x:Static SystemFonts.MessageFontWeightKey}}" />
        </Style>
    </Window.Resources>
    <StackPanel
        HorizontalAlignment="Center"
        VerticalAlignment="Center">
        <Button
            Width="100"
            Height="30"
            Content="테스트" />
        <Button
            Style="{StaticResource SystemFontStyleKey}"
            Margin="0 10 0 0"
            Width="100"
            Height="30"
            Content="테스트" />
        <Button
            Margin="0 10 0 0"
            Width="100"
            Height="30"
            Content="테스트" />
    </StackPanel>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

</Style>

</Window.Resources>

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center">

<Button

Width="100"

Height="30"

Content="테스트" />

<Button

Style="{StaticResource SystemFontStyleKey}"

Margin="0 10 0 0"

Width="100"

Height="30"

Content="테스트" />

<Button

Margin="0 10 0 0"

Width="100"

Height="30"

Content="테스트" />

</StackPanel>

</Window>

TestProject.zip

[C#/MAUI/.NET6] RelativeSource 태그 확장 : 바인딩 뷰 모델 참조하기

■ RelativeSource 태그 확장에서 바인딩 뷰 모델을 참조하는 방법을 보여준다. ▶ 예제 코드 (XAML)


Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=DeletePersonCommand}" />

Command="{Binding Source={RelativeSource AncestorType={x:Type local:MainPageViewModel}}, Path=DeletePersonCommand}" />

[C#/MAUI/.NET6] RelativeSource 태그 확장 : Mode 속성을 사용해 템플리트 부모 참조하기

■ RelativeSource 태그 확장의 Mode 속성을 사용해 템플리트 부모를 참조하는 방법을 보여준다. ▶ 예제 코드 (XAML)


BindingContext="{Binding Source={RelativeSource TemplatedParent}}"

IsExpanded="{Binding IsExpanded, Source={RelativeSource TemplatedParent}}"

BindingContext="{Binding Source={RelativeSource TemplatedParent}}"

IsExpanded="{Binding IsExpanded, Source={RelativeSource TemplatedParent}}"

[C#/MAUI/.NET6] RelativeSource 태그 확장 : Mode 속성을 사용해 자기 자신 참조하기

■ RelativeSource 태그 확장의 Mode 속성을 사용해 자기 자신을 참조하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    BindingContext="{Binding Source={RelativeSource Self}, Path=DefaultViewModel}">
    <StackLayout>
        <ListView ItemsSource="{Binding EmployeeCollection}">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

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

BindingContext="{Binding Source={RelativeSource Self}, Path=DefaultViewModel}">

...

</ListView>

</StackLayout>

</ContentPage>

[C#/MAUI/.NET6] RelativeSource 태그 확장 : Mode 속성을 사용해 자기 자신 참조하기

■ RelativeSource 태그 확장의 Mode 속성을 사용해 자기 자신을 참조하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<BoxView
    HorizontalOptions="Center"
    VerticalOptions="Center"
    WidthRequest="200"
    HeightRequest="{Binding Source={RelativeSource Self}, Path=WidthRequest}"
    Color="Red" />

<BoxView

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="200"

HeightRequest="{Binding Source={RelativeSource Self}, Path=WidthRequest}"

Color="Red" />

[C#/MAUI/.NET6] Binding 태그 확장 : StringFormat 속성에서 중괄호({ }) 사용하기

■ Binding 태그 확장의 StringFormat 속성에서 중괄호({ })를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Label
    HorizontalOptions="Start"
    Text="{Binding StringFormat='{{0:MMMM}} 포맷 문자열 : {0:MMMM}'}" />

<Label

HorizontalOptions="Start"

Text="{Binding StringFormat='{{0:MMMM}} 포맷 문자열 : {0:MMMM}'}" />

[C#/MAUI/.NET6] Binding 태그 확장 : StringFormat 속성에서 이중 인용 부호(“) 사용하기

■ Binding 태그 확장의 StringFormat 속성에서 이중 인용 부호(")를 사용하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Label Text="{Binding Source={x:Reference entry}, Path=Text, StringFormat='입력 텍스트 :  &quot;{0}&quot;'}" />

[C#/MAUI/.NET6] Binding 태그 확장 : StringFormat 속성 사용하기

■ Binding 태그 확장의 StringFormat 속성을 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:sys="clr-namespace:System;assembly=netstandard">
    <ContentPage.Resources>
        <Style TargetType="Label">
            <Setter Property="HorizontalTextAlignment" Value="Center" />
        </Style>
        <Style TargetType="BoxView">
            <Setter Property="HeightRequest" Value="2"    />
            <Setter Property="Margin"        Value="0,30"  />
            <Setter Property="Color"         Value="Blue" />
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <Slider x:Name="slider" />
        <Label Text="{Binding Source={x:Reference slider}, Path=Value, StringFormat='슬라이더 값 : {0:F2}'}" />
        <BoxView />
        <TimePicker x:Name="timePicker" />
        <Label Text="{Binding Source={x:Reference timePicker}, Path=Time, StringFormat='시간 범위 : {0:c}'}" />
        <BoxView />
        <Entry x:Name="entry" />
        <Label Text="{Binding Source={x:Reference entry}, Path=Text, StringFormat='입력 텍스트 :  &quot;{0}&quot;'}" />
        <BoxView />
        <StackLayout BindingContext="{x:Static sys:DateTime.Now}">
            <Label
                HorizontalOptions="Start"
                Text="{Binding}" />
            <Label
                HorizontalOptions="Start"
                Text="{Binding Path=Ticks, StringFormat='1/1/1일 이후 틱 수 : {0:N0}'}" />
            <Label
                HorizontalOptions="Start"
                Text="{Binding StringFormat='{{0:MMMM}} 포맷 문자열 : {0:MMMM}'}" />
            <Label
                HorizontalOptions="Start"
                Text="{Binding StringFormat='긴 형식 날짜 : {0:D}'}" />
        </StackLayout>
        <BoxView />
        <StackLayout BindingContext="{x:Static sys:Math.PI}">
            <Label
                HorizontalOptions="Start"
                Text="{Binding}" />
            <Label
                HorizontalOptions="Start"
                Text="{Binding StringFormat='소수점 4자리 PI 값 : {0:F4}'}" />
            <Label
                HorizontalOptions="Start"
                Text="{Binding StringFormat='과학점 표기 PI 값 : {0:E7}'}" />
        </StackLayout>
    </StackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

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

xmlns:sys="clr-namespace:System;assembly=netstandard">

<ContentPage.Resources>

</Style>

</Style>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<Label

HorizontalOptions="Start"

Text="{Binding}" />

<Label

HorizontalOptions="Start"

Text="{Binding Path=Ticks, StringFormat='1/1/1일 이후 틱 수 : {0:N0}'}" />

<Label

HorizontalOptions="Start"

Text="{Binding StringFormat='{{0:MMMM}} 포맷 문자열 : {0:MMMM}'}" />

<Label

HorizontalOptions="Start"

Text="{Binding StringFormat='긴 형식 날짜 : {0:D}'}" />

</StackLayout>

<Label

HorizontalOptions="Start"

Text="{Binding}" />

<Label

HorizontalOptions="Start"

Text="{Binding StringFormat='소수점 4자리 PI 값 : {0:F4}'}" />

<Label

HorizontalOptions="Start"

Text="{Binding StringFormat='과학점 표기 PI 값 : {0:E7}'}" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] x:TypeArguments 속성 : 제네릭 타입 인자로 복수 타입 사용하기

■ x:TypeArguments 속성에서 제네릭 타입 인자로 복수 타입을 사용하는 방법을 보여준다. ▶ MonkeyModel.cs


namespace TestProject;

/// <summary>
/// 원숭이 모델
/// </summary>
public class MonkeyModel
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 이미지 URL - ImageURL

    /// <summary>
    /// 이미지 URL
    /// </summary>
    public string ImageURL { get; set; }

    #endregion
    #region 명칭 - Name

    /// <summary>
    /// 명칭
    /// </summary>
    public string Name { get; set; }

    #endregion
    #region 서식지 - Location

    /// <summary>
    /// 서식지
    /// </summary>
    public string Location { get; set; }

    #endregion
}

namespace TestProject;

/// <summary>

/// 원숭이 모델

/// </summary>

public class MonkeyModel

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 이미지 URL - ImageURL

/// <summary>

/// 이미지 URL

/// </summary>

public string ImageURL { get; set; }

#endregion

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; set; }

#endregion

#region 서식지 - Location

/// <summary>

/// 서식지

/// </summary>

public string Location { get; set; }

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:scg="clr-namespace:System.Collections.Generic;assembly=netstandard"
    xmlns:local="clr-namespace:TestProject">
    <CollectionView Margin="10">
        <CollectionView.ItemsSource>
            <scg:List x:TypeArguments="scg:KeyValuePair(x:String,local:MonkeyModel)">
                <scg:KeyValuePair x:TypeArguments="x:String,local:MonkeyModel">
                    <x:Arguments>
                        <x:String>Baboon</x:String>
                        <local:MonkeyModel
                            ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/
                                200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
                            Location="Africa and Asia" />
                    </x:Arguments>
                </scg:KeyValuePair>
                <scg:KeyValuePair x:TypeArguments="x:String,local:MonkeyModel">
                    <x:Arguments>
                        <x:String>Capuchin Monkey</x:String>
                        <local:MonkeyModel
                            ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
                            Location="Central and South America" />
                    </x:Arguments>
                </scg:KeyValuePair>
                <scg:KeyValuePair x:TypeArguments="x:String,local:MonkeyModel">
                    <x:Arguments>
                        <x:String>Blue Monkey</x:String>
                        <local:MonkeyModel
                            ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
                            Location="Central and East Africa" />
                    </x:Arguments>
                </scg:KeyValuePair>
            </scg:List>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid
                    Padding="10"
                    RowDefinitions="Auto,Auto"
                    ColumnDefinitions="Auto,10,Auto">
                    <Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
                        WidthRequest="60"
                        HeightRequest="60"
                        Aspect="AspectFill"
                        Source="{Binding Value.ImageURL}" />
                    <Label Grid.Column="2"
                        FontSize="16"
                        FontAttributes="Bold"
                        Text="{Binding Key}" />
                    <Label Grid.Row="1" Grid.Column="2"
                        VerticalOptions="End"
                        FontAttributes="Italic"
                        Text="{Binding Value.Location}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

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

xmlns:scg="clr-namespace:System.Collections.Generic;assembly=netstandard"

xmlns:local="clr-namespace:TestProject">

<CollectionView.ItemsSource>

<scg:List x:TypeArguments="scg:KeyValuePair(x:String,local:MonkeyModel)">

<scg:KeyValuePair x:TypeArguments="x:String,local:MonkeyModel">

<x:Arguments>

<x:String>Baboon</x:String>

<local:MonkeyModel

ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/

200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"

Location="Africa and Asia" />

</x:Arguments>

</scg:KeyValuePair>

<scg:KeyValuePair x:TypeArguments="x:String,local:MonkeyModel">

<x:Arguments>

<x:String>Capuchin Monkey</x:String>

<local:MonkeyModel

ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"

Location="Central and South America" />

</x:Arguments>

</scg:KeyValuePair>

<scg:KeyValuePair x:TypeArguments="x:String,local:MonkeyModel">

<x:Arguments>

<x:String>Blue Monkey</x:String>

<local:MonkeyModel

ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"

Location="Central and East Africa" />

</x:Arguments>

</scg:KeyValuePair>

</scg:List>

</CollectionView.ItemsSource>

<CollectionView.ItemTemplate>

<Grid

Padding="10"

RowDefinitions="Auto,Auto"

ColumnDefinitions="Auto,10,Auto">

<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"

WidthRequest="60"

HeightRequest="60"

Aspect="AspectFill"

Source="{Binding Value.ImageURL}" />

<Label Grid.Column="2"

FontSize="16"

FontAttributes="Bold"

Text="{Binding Key}" />

<Label Grid.Row="1" Grid.Column="2"

VerticalOptions="End"

FontAttributes="Italic"

Text="{Binding Value.Location}" />

</Grid>

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] x:TypeArguments 속성 : 제네릭 타입 인자로 단일 객체 타입 사용하기

■ x:TypeArguments 속성에서 제네릭 타입 인자로 단일 객체 타입을 사용하는 방법을 보여준다. ▶ MonkeyModel.cs


namespace TestProject;

/// <summary>
/// 원숭이 모델
/// </summary>
public class MonkeyModel
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 이미지 URL - ImageURL

    /// <summary>
    /// 이미지 URL
    /// </summary>
    public string ImageURL { get; set; }

    #endregion
    #region 명칭 - Name

    /// <summary>
    /// 명칭
    /// </summary>
    public string Name { get; set; }

    #endregion
    #region 서식지 - Location

    /// <summary>
    /// 서식지
    /// </summary>
    public string Location { get; set; }

    #endregion
}

namespace TestProject;

/// <summary>

/// 원숭이 모델

/// </summary>

public class MonkeyModel

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Property

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 이미지 URL - ImageURL

/// <summary>

/// 이미지 URL

/// </summary>

public string ImageURL { get; set; }

#endregion

#region 명칭 - Name

/// <summary>

/// 명칭

/// </summary>

public string Name { get; set; }

#endregion

#region 서식지 - Location

/// <summary>

/// 서식지

/// </summary>

public string Location { get; set; }

#endregion

}

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:scg="clr-namespace:System.Collections.Generic;assembly=netstandard"
    xmlns:local="clr-namespace:TestProject">
    <CollectionView Margin="10">
        <CollectionView.ItemsSource>
            <scg:List x:TypeArguments="local:MonkeyModel">
                <local:MonkeyModel
                    ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
                    Name="Baboon"
                    Location="Africa and Asia" />
                <local:MonkeyModel
                    ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
                    Name="Capuchin Monkey"
                    Location="Central and South America" />
                <local:MonkeyModel
                    ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
                    Name="Blue Monkey"
                    Location="Central and East Africa" />
            </scg:List>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid
                    Padding="10"
                    RowDefinitions="Auto,Auto"
                    ColumnDefinitions="Auto,10,Auto">
                    <Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"
                        WidthRequest="60"
                        HeightRequest="60"
                        Aspect="AspectFill"
                        Source="{Binding ImageURL}" />
                    <Label Grid.Column="2"
                        FontSize="16"
                        FontAttributes="Bold"
                        Text="{Binding Name}" />
                    <Label Grid.Row="1" Grid.Column="2"
                        VerticalOptions="End"
                        FontAttributes="Italic"
                        Text="{Binding Location}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

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

xmlns:scg="clr-namespace:System.Collections.Generic;assembly=netstandard"

xmlns:local="clr-namespace:TestProject">

<CollectionView.ItemsSource>

<scg:List x:TypeArguments="local:MonkeyModel">

<local:MonkeyModel

ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"

Name="Baboon"

Location="Africa and Asia" />

<local:MonkeyModel

ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"

Name="Capuchin Monkey"

Location="Central and South America" />

<local:MonkeyModel

ImageURL="https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"

Name="Blue Monkey"

Location="Central and East Africa" />

</scg:List>

</CollectionView.ItemsSource>

<CollectionView.ItemTemplate>

<Grid

Padding="10"

RowDefinitions="Auto,Auto"

ColumnDefinitions="Auto,10,Auto">

<Image Grid.Row="0" Grid.RowSpan="2" Grid.Column="0"

WidthRequest="60"

HeightRequest="60"

Aspect="AspectFill"

Source="{Binding ImageURL}" />

<Label Grid.Column="2"

FontSize="16"

FontAttributes="Bold"

Text="{Binding Name}" />

<Label Grid.Row="1" Grid.Column="2"

VerticalOptions="End"

FontAttributes="Italic"

Text="{Binding Location}" />

</Grid>

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] x:TypeArguments 속성 : 제네릭 타입 인자로 단일 기본 타입 사용하기

■ x:TypeArguments 속성에서 제네릭 타입 인자로 단일 기본 타입을 사용하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:scg="clr-namespace:System.Collections.Generic;assembly=netstandard">
    <CollectionView Margin="10">
        <CollectionView.ItemsSource>
            <scg:List x:TypeArguments="x:String">
                <x:String>Baboon</x:String>
                <x:String>Capuchin Monkey</x:String>
                <x:String>Blue Monkey</x:String>
                <x:String>Squirrel Monkey</x:String>
                <x:String>Golden Lion Tamarin</x:String>
                <x:String>Howler Monkey</x:String>
                <x:String>Japanese Macaque</x:String>
            </scg:List>
        </CollectionView.ItemsSource>
    </CollectionView>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

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

xmlns:scg="clr-namespace:System.Collections.Generic;assembly=netstandard">

<CollectionView.ItemsSource>

<scg:List x:TypeArguments="x:String">

<x:String>Baboon</x:String>

<x:String>Capuchin Monkey</x:String>

<x:String>Blue Monkey</x:String>

<x:String>Squirrel Monkey</x:String>

<x:String>Golden Lion Tamarin</x:String>

<x:String>Howler Monkey</x:String>

<x:String>Japanese Macaque</x:String>

</scg:List>

</CollectionView.ItemsSource>

</CollectionView>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Style 엘리먼트 : DynamicResource 태그 확장을 사용해 동적 스타일 설정하기

■ Style 엘리먼트의 DynamicResource 태그 확장을 사용해 동적 스타일을 설정하는 방법을 보여준다. ▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentPage.Resources>
        <Style x:Key="SearchBarStyleKey" TargetType="SearchBar">
            <Setter Property="FontAttributes"   Value="Italic" />
            <Setter Property="PlaceholderColor" Value="Blue"   />
        </Style>
        <Style x:Key="BlueSearchBarStyleKey" TargetType="SearchBar">
            <Setter Property="FontAttributes"   Value="Italic" />
            <Setter Property="PlaceholderColor" Value="Blue"   />
        </Style>
        <Style x:Key="GreenSearchBarStyleKey" TargetType="SearchBar">
            <Setter Property="FontAttributes"   Value="None"  />
            <Setter Property="PlaceholderColor" Value="Green" />
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <SearchBar x:Name="searchBar"
            Style="{DynamicResource SearchBarStyleKey}"
            Placeholder="SearchBar demonstrating dynamic styles" />
        <Button x:Name="changeButton"
            HorizontalOptions="Center"
            Margin="0,10,0,0"
            Text="스타일 변경" />
    </StackLayout>
</ContentPage>

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

<ContentPage x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

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

<ContentPage.Resources>

</Style>

</Style>

</Style>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center">

<SearchBar x:Name="searchBar"

Style="{DynamicResource SearchBarStyleKey}"

Placeholder="SearchBar demonstrating dynamic styles" />

<Button x:Name="changeButton"

HorizontalOptions="Center"

Margin="0,10,0,0"

Text="스타일 변경" />

</StackLayout>

</ContentPage>

▶ MainPage.xaml.cs


namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        this.changeButton.Clicked += changeButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Methoc
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 스타일 변경 버튼 클릭시 처리하기 - changeButton_Clicked(sender, e)

    /// <summary>
    /// 스타일 변경 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void changeButton_Clicked(object sender, EventArgs e)
    {
        if(Resources["SearchBarStyleKey"] == Resources["GreenSearchBarStyleKey"])
        {
            Resources["SearchBarStyleKey"] = Resources["BlueSearchBarStyleKey"];
        }
        else
        {
            Resources["SearchBarStyleKey"] = Resources["GreenSearchBarStyleKey"];
        }
    }

    #endregion
}

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.changeButton.Clicked += changeButton_Clicked;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Methoc

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 스타일 변경 버튼 클릭시 처리하기 - changeButton_Clicked(sender, e)

/// <summary>

/// 스타일 변경 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void changeButton_Clicked(object sender, EventArgs e)

{

if(Resources["SearchBarStyleKey"] == Resources["GreenSearchBarStyleKey"])

{

Resources["SearchBarStyleKey"] = Resources["BlueSearchBarStyleKey"];

}

else

{

Resources["SearchBarStyleKey"] = Resources["GreenSearchBarStyleKey"];

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] x:Array 엘리먼트 : 문자열 배열 사용하기

[x:Array 엘리먼트 : 문자열 배열 사용하기] ▶ 예제 코드 (XAML)


<x:Array Type="{x:Type x:String}">
    <x:String>Baboon</x:String>
    <x:String>Capuchin Monkey</x:String>
    <x:String>Blue Monkey</x:String>
    <x:String>Squirrel Monkey</x:String>
    <x:String>Golden Lion Tamarin</x:String>
    <x:String>Howler Monkey</x:String>
    <x:String>Japanese Macaque</x:String>
</x:Array>

<x:Array Type="{x:Type x:String}">

<x:String>Baboon</x:String>

<x:String>Capuchin Monkey</x:String>

<x:String>Blue Monkey</x:String>

<x:String>Squirrel Monkey</x:String>

<x:String>Golden Lion Tamarin</x:String>

<x:String>Howler Monkey</x:String>

<x:String>Japanese Macaque</x:String>

</x:Array>