STYLE Archives - 5 중 2 번째 페이지

[C#/WPF] EventSetter 엘리먼트 : Event/Handler 속성을 사용해 ListBoxItem 객체를 마우드 더블 클릭시 처리하기

■ EventSetter 엘리먼트의 Event/Handler 속성을 사용해 ListBoxItem 객체를 마우드 더블 클릭시 처리하는 방법을 보여준다. ▶ 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>
        <XmlDataProvider x:Key="XmlDataProviderKey" XPath="Books">
            <x:XData>
                <Books xmlns="">
                    <Book
                        ISBN="0-7356-0562-9"
                        Stock="in"
                        Number="9">
                        <Title>XML in Action</Title>
                        <Summary>XML Web Technology</Summary>
                    </Book>
                    <Book
                        ISBN="0-7356-1370-2"
                        Stock="in"
                        Number="8">
                        <Title>Programming Microsoft Windows With C#</Title>
                        <Summary>C# Programming using the .NET Framework</Summary>
                    </Book>
                    <Book
                        ISBN="0-7356-1288-9"
                        Stock="out"
                        Number="7">
                        <Title>Inside C#</Title>
                        <Summary>C# Language Programming</Summary>
                    </Book>
                    <Book
                        ISBN="0-7356-1377-X"
                        Stock="in"
                        Number="5">
                        <Title>Introducing Microsoft .NET</Title>
                        <Summary>Overview of .NET Technology</Summary>
                    </Book>
                    <Book
                        ISBN="0-7356-1448-2"
                        Stock="out"
                        Number="4">
                        <Title>Microsoft C# Language Specifications</Title>
                        <Summary>The C# language definition</Summary>
                    </Book>
                </Books>
            </x:XData>
        </XmlDataProvider>
        <Style TargetType="ListViewItem">
            <EventSetter
                Event="MouseDoubleClick"
                Handler="listViewItem_MouseDoubleClick" />
        </Style>
    </Window.Resources>
    <ListView ItemsSource="{Binding Source={StaticResource XmlDataProviderKey}, XPath=Book}">
        <ListView.View>
            <GridView>
                <GridViewColumn
                    Width="300"
                    Header="Title"
                    DisplayMemberBinding="{Binding XPath=Title}" />
                <GridViewColumn
                    Width="150"
                    Header="ISBN"
                    DisplayMemberBinding="{Binding XPath=@ISBN}" />
            </GridView>
        </ListView.View>
    </ListView>
</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>

<x:XData>

<Book

ISBN="0-7356-0562-9"

Stock="in"

Number="9">

<Title>XML in Action</Title>

<Summary>XML Web Technology</Summary>

</Book>

<Book

ISBN="0-7356-1370-2"

Stock="in"

Number="8">

<Title>Programming Microsoft Windows With C#</Title>

<Summary>C# Programming using the .NET Framework</Summary>

</Book>

<Book

ISBN="0-7356-1288-9"

Stock="out"

Number="7">

<Title>Inside C#</Title>

<Summary>C# Language Programming</Summary>

</Book>

<Book

ISBN="0-7356-1377-X"

Stock="in"

Number="5">

<Title>Introducing Microsoft .NET</Title>

<Summary>Overview of .NET Technology</Summary>

</Book>

<Book

ISBN="0-7356-1448-2"

Stock="out"

Number="4">

<Title>Microsoft C# Language Specifications</Title>

<Summary>The C# language definition</Summary>

</Book>

</Books>

</x:XData>

</XmlDataProvider>

<EventSetter

Event="MouseDoubleClick"

Handler="listViewItem_MouseDoubleClick" />

</Style>

</Window.Resources>

<ListView.View>

<GridViewColumn

Width="300"

Header="Title"

DisplayMemberBinding="{Binding XPath=Title}" />

<GridViewColumn

Width="150"

Header="ISBN"

DisplayMemberBinding="{Binding XPath=@ISBN}" />

</GridView>

</ListView.View>

</ListView>

</Window>

▶ MainWindow.xaml.cs


using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Xml;

namespace TestProject
{
    /// <summary>
    /// 메인 윈도우
    /// </summary>
    public partial class MainWindow : Window
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainWindow()

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

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 리스트 뷰 항목 마우스 더블 클릭시 처리하기 - listViewItem_MouseDoubleClick(sender, e)

        /// <summary>
        /// 리스트 뷰 항목 마우스 더블 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listViewItem_MouseDoubleClick(object sender, MouseButtonEventArgs e)
        {
            XmlElement bookXmlElement = (sender as ListViewItem).Content as XmlElement;

            if(bookXmlElement == null)
            {
                return;
            }

            if(bookXmlElement.GetAttribute("Stock") == "out")
            {
                MessageBox.Show("Time to order more copies of " + bookXmlElement["Title"].InnerText);
            }
            else
            {
                MessageBox.Show(bookXmlElement["Title"].InnerText + " is available.");
            }
        }

        #endregion
    }
}

using System.Windows;

using System.Windows.Controls;

using System.Windows.Input;

using System.Xml;

namespace TestProject

{

/// <summary>

/// 메인 윈도우

/// </summary>

public partial class MainWindow : Window

{

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

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

#region 생성자 - MainWindow()

/// <summary>

/// 생성자

/// </summary>

public MainWindow()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

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

#region 리스트 뷰 항목 마우스 더블 클릭시 처리하기 - listViewItem_MouseDoubleClick(sender, e)

/// <summary>

/// 리스트 뷰 항목 마우스 더블 클릭시 처리하기

/// </summary>

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

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

private void listViewItem_MouseDoubleClick(object sender, MouseButtonEventArgs e)

{

XmlElement bookXmlElement = (sender as ListViewItem).Content as XmlElement;

if(bookXmlElement == null)

{

return;

}

if(bookXmlElement.GetAttribute("Stock") == "out")

{

MessageBox.Show("Time to order more copies of " + bookXmlElement["Title"].InnerText);

}

else

{

MessageBox.Show(bookXmlElement["Title"].InnerText + " is available.");

}

#endregion

}

TestProject.zip

[C#/MAUI/COMMUNITY TOOLKIT/.NET6] Style 클래스 사용하기

■ Style<T> 클래스를 사용하는 방법을 보여준다. ▶ 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">
    <Entry x:Name="entry"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        BackgroundColor="Yellow"
        WidthRequest="100"
        Placeholder="숫자 2자 이상 입력해 주시기 바랍니다." />
</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">

<Entry x:Name="entry"

HorizontalOptions="Center"

VerticalOptions="Center"

BackgroundColor="Yellow"

WidthRequest="100"

Placeholder="숫자 2자 이상 입력해 주시기 바랍니다." />

</ContentPage>

▶ MainPage.xaml.cs


using CommunityToolkit.Maui.Behaviors;
using CommunityToolkit.Maui.Markup;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        CharactersValidationBehavior behavior = new CharactersValidationBehavior
        {
            ValidStyle                = new Style<Entry>(Entry.TextColorProperty, Colors.Green),
            InvalidStyle              = new Style<Entry>(Entry.TextColorProperty, Colors.Red),
            Flags                     = ValidationFlags.ValidateOnValueChanged,
            CharacterType             = CharacterType.Digit,
            MinimumCharacterTypeCount = 2
        };

        this.entry.Behaviors.Add(behavior);
    }

    #endregion
}

using CommunityToolkit.Maui.Behaviors;

using CommunityToolkit.Maui.Markup;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

CharactersValidationBehavior behavior = new CharactersValidationBehavior

{

ValidStyle = new Style<Entry>(Entry.TextColorProperty, Colors.Green),

InvalidStyle = new Style<Entry>(Entry.TextColorProperty, Colors.Red),

Flags = ValidationFlags.ValidateOnValueChanged,

CharacterType = CharacterType.Digit,

MinimumCharacterTypeCount = 2

};

this.entry.Behaviors.Add(behavior);

}

#endregion

}

▶ MauiProgram.cs


using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>
/// MAUI 프로그램
/// </summary>
public static class MauiProgram
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region MAUI 앱 생성하기 - CreateMauiApp()

    /// <summary>
    /// MAUI 앱 생성하기
    /// </summary>
    /// <returns>MAUI 앱</returns>
    public static MauiApp CreateMauiApp()
    {
        MauiAppBuilder builder = MauiApp.CreateBuilder();

        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts
            (
                fontCollection =>
                {
                    fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );
                    fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                }
            );

        return builder.Build();
    }

    #endregion
}

using CommunityToolkit.Maui;

namespace TestProject;

/// <summary>

/// MAUI 프로그램

/// </summary>

public static class MauiProgram

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region MAUI 앱 생성하기 - CreateMauiApp()

/// <summary>

/// MAUI 앱 생성하기

/// </summary>

/// <returns>MAUI 앱</returns>

public static MauiApp CreateMauiApp()

{

MauiAppBuilder builder = MauiApp.CreateBuilder();

builder

.UseMauiApp<App>()

.UseMauiCommunityToolkit()

.ConfigureFonts

(

fontCollection =>

{

fontCollection.AddFont("OpenSans-Regular.ttf" , "OpenSansRegular" );

fontCollection.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

}

);

return builder.Build();

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] Style 엘리먼트 : TargetTye 속성을 사용해 컨트롤 템플리트 설정하기

■ Style 엘리먼트의 TargetTye 속성을 사용해 컨트롤 템플리트를 설정하는 방법을 보여준다. ▶ CardView.xaml


<?xml version="1.0" encoding="utf-8" ?>
<ContentView x:Class="TestProject.CardView"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Frame x:Name="frame"
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="0,0,0,0"
        CornerRadius="5"
        BorderColor="{Binding BorderColor}"
        BackgroundColor="{Binding CardColor}"
        HasShadow="True"
        Padding="8">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="75"   />
                <RowDefinition Height="5"    />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="75"  />
                <ColumnDefinition Width="200" />
            </Grid.ColumnDefinitions>
            <Frame Grid.Row="0" Grid.Column="0"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                WidthRequest="60"
                HeightRequest="60"
                CornerRadius="40"
                BorderColor="{Binding BorderColor, FallbackValue='Black'}"
                BackgroundColor="{Binding IconBackgroundColor, FallbackValue='Gray'}"
                HasShadow="False"
                IsClippedToBounds="True">
                <Image
                    Margin="-20"
                    WidthRequest="100"
                    HeightRequest="100"
                    Aspect="AspectFill"
                    Source="{Binding IconImageSource}" />
            </Frame>
            <Label Grid.Row="0" Grid.Column="1"
                HorizontalTextAlignment="Start"
                VerticalTextAlignment="Center"
                FontSize="Large"
                FontAttributes="Bold"
                Text="{Binding CardTitle, FallbackValue='Card Title'}" />
            <BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalOptions="Fill"
                HeightRequest="2"
                BackgroundColor="{Binding BorderColor, FallbackValue='Black'}" />
           <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
                HorizontalOptions="Fill"
                VerticalOptions="Fill"
                VerticalTextAlignment="Start"
                Text="{Binding CardDescription, FallbackValue='Card description text.'}" />
        </Grid>
    </Frame>
</ContentView>

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

<ContentView x:Class="TestProject.CardView"

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

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

<Frame x:Name="frame"

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="0,0,0,0"

CornerRadius="5"

BorderColor="{Binding BorderColor}"

BackgroundColor="{Binding CardColor}"

HasShadow="True"

Padding="8">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Frame Grid.Row="0" Grid.Column="0"

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="60"

HeightRequest="60"

CornerRadius="40"

BorderColor="{Binding BorderColor, FallbackValue='Black'}"

BackgroundColor="{Binding IconBackgroundColor, FallbackValue='Gray'}"

HasShadow="False"

IsClippedToBounds="True">

<Image

Margin="-20"

WidthRequest="100"

HeightRequest="100"

Aspect="AspectFill"

Source="{Binding IconImageSource}" />

</Frame>

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

HorizontalTextAlignment="Start"

VerticalTextAlignment="Center"

FontSize="Large"

FontAttributes="Bold"

Text="{Binding CardTitle, FallbackValue='Card Title'}" />

<BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"

HorizontalOptions="Fill"

HeightRequest="2"

BackgroundColor="{Binding BorderColor, FallbackValue='Black'}" />

<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"

HorizontalOptions="Fill"

VerticalOptions="Fill"

VerticalTextAlignment="Start"

Text="{Binding CardDescription, FallbackValue='Card description text.'}" />

</Grid>

</Frame>

</ContentView>

▶ CardView.xaml.cs


namespace TestProject;

/// <summary>
/// 카드 뷰
/// </summary>
public partial class CardView : ContentView
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Bindable Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 테두리 색상 속성 - BorderColorProperty

    /// <summary>
    /// 테두리 색상 속성
    /// </summary>
    public static readonly BindableProperty BorderColorProperty = BindableProperty.Create
    (
        nameof(BorderColor),
        typeof(Color),
        typeof(CardView),
        Colors.DarkGray
    );

    #endregion
    #region 카드 색상 속성 - CardColorProperty

    /// <summary>
    /// 카드 색상 속성
    /// </summary>
    public static readonly BindableProperty CardColorProperty = BindableProperty.Create
    (
        nameof(CardColor),
        typeof(Color),
        typeof(CardView),
        Colors.White
    );

    #endregion
    #region 아이콘 배경 색상 속성 - IconBackgroundColorProperty

    /// <summary>
    /// 아이콘 배경 색상 속성
    /// </summary>
    public static readonly BindableProperty IconBackgroundColorProperty = BindableProperty.Create
    (
        nameof(IconBackgroundColor),
        typeof(Color),
        typeof(CardView),
        Colors.LightGray
    );

    #endregion
    #region 아이콘 이미지 소스 속성 - IconImageSourceProperty

    /// <summary>
    /// 아이콘 이미지 소스 속성
    /// </summary>
    public static readonly BindableProperty IconImageSourceProperty = BindableProperty.Create
    (
        nameof(IconImageSource),
        typeof(ImageSource),
        typeof(CardView),
        default(ImageSource)
    );

    #endregion
    #region 카드 제목 속성 - CardTitleProperty

    /// <summary>
    /// 카드 제목 속성
    /// </summary>
    public static readonly BindableProperty CardTitleProperty = BindableProperty.Create
    (
        nameof(CardTitle),
        typeof(string),
        typeof(CardView),
        string.Empty
    );

    #endregion
    #region 카드 설명 속성 - CardDescriptionProperty

    /// <summary>
    /// 카드 설명 속성
    /// </summary>
    public static readonly BindableProperty CardDescriptionProperty = BindableProperty.Create
    (
        nameof(CardDescription),
        typeof(string),
        typeof(CardView),
        string.Empty
    );

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 테두리 색상 - BorderColor

    /// <summary>
    /// 테두리 색상
    /// </summary>
    public Color BorderColor
    {
        get => (Color)GetValue(BorderColorProperty);
        set => SetValue(BorderColorProperty, value);
    }

    #endregion
    #region 카드 색상 - CardColor

    /// <summary>
    /// 카드 색상
    /// </summary>
    public Color CardColor
    {
        get => (Color)GetValue(CardColorProperty);
        set => SetValue(CardColorProperty, value);
    }

    #endregion
    #region 아이콘 배경 색상 - IconBackgroundColor

    /// <summary>
    /// 아이콘 배경 색상
    /// </summary>
    public Color IconBackgroundColor
    {
        get => (Color)GetValue(IconBackgroundColorProperty);
        set => SetValue(IconBackgroundColorProperty, value);
    }

    #endregion
    #region 아이콘 이미지 소스 - IconImageSource

    /// <summary>
    /// 아이콘 이미지 소스
    /// </summary>
    public ImageSource IconImageSource
    {
        get => (ImageSource)GetValue(IconImageSourceProperty);
        set => SetValue(IconImageSourceProperty, value);
    }

    #endregion
    #region 카드 제목 - CardTitle

    /// <summary>
    /// 카드 제목
    /// </summary>
    public string CardTitle
    {
        get => (string)GetValue(CardTitleProperty);
        set => SetValue(CardTitleProperty, value);
    }

    #endregion
    #region 카드 설명 - CardDescription

    /// <summary>
    /// 카드 설명
    /// </summary>
    public string CardDescription
    {
        get => (string)GetValue(CardDescriptionProperty);
        set => SetValue(CardDescriptionProperty, value);
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - CardView()

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

        this.frame.BindingContext = this;
    }

    #endregion
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

namespace TestProject;

/// <summary>

/// 카드 뷰

/// </summary>

public partial class CardView : ContentView

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Bindable Property

////////////////////////////////////////////////////////////////////////////////////////// Static

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

#region 테두리 색상 속성 - BorderColorProperty

/// <summary>

/// 테두리 색상 속성

/// </summary>

public static readonly BindableProperty BorderColorProperty = BindableProperty.Create

(

nameof(BorderColor),

typeof(Color),

typeof(CardView),

Colors.DarkGray

);

#endregion

#region 카드 색상 속성 - CardColorProperty

/// <summary>

/// 카드 색상 속성

/// </summary>

public static readonly BindableProperty CardColorProperty = BindableProperty.Create

(

nameof(CardColor),

typeof(Color),

typeof(CardView),

Colors.White

);

#endregion

#region 아이콘 배경 색상 속성 - IconBackgroundColorProperty

/// <summary>

/// 아이콘 배경 색상 속성

/// </summary>

public static readonly BindableProperty IconBackgroundColorProperty = BindableProperty.Create

(

nameof(IconBackgroundColor),

typeof(Color),

typeof(CardView),

Colors.LightGray

);

#endregion

#region 아이콘 이미지 소스 속성 - IconImageSourceProperty

/// <summary>

/// 아이콘 이미지 소스 속성

/// </summary>

public static readonly BindableProperty IconImageSourceProperty = BindableProperty.Create

(

nameof(IconImageSource),

typeof(ImageSource),

typeof(CardView),

default(ImageSource)

);

#endregion

#region 카드 제목 속성 - CardTitleProperty

/// <summary>

/// 카드 제목 속성

/// </summary>

public static readonly BindableProperty CardTitleProperty = BindableProperty.Create

(

nameof(CardTitle),

typeof(string),

typeof(CardView),

string.Empty

);

#endregion

#region 카드 설명 속성 - CardDescriptionProperty

/// <summary>

/// 카드 설명 속성

/// </summary>

public static readonly BindableProperty CardDescriptionProperty = BindableProperty.Create

(

nameof(CardDescription),

typeof(string),

typeof(CardView),

string.Empty

);

#endregion

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

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

#region 테두리 색상 - BorderColor

/// <summary>

/// 테두리 색상

/// </summary>

public Color BorderColor

{

get => (Color)GetValue(BorderColorProperty);

set => SetValue(BorderColorProperty, value);

}

#endregion

#region 카드 색상 - CardColor

/// <summary>

/// 카드 색상

/// </summary>

public Color CardColor

{

get => (Color)GetValue(CardColorProperty);

set => SetValue(CardColorProperty, value);

}

#endregion

#region 아이콘 배경 색상 - IconBackgroundColor

/// <summary>

/// 아이콘 배경 색상

/// </summary>

public Color IconBackgroundColor

{

get => (Color)GetValue(IconBackgroundColorProperty);

set => SetValue(IconBackgroundColorProperty, value);

}

#endregion

#region 아이콘 이미지 소스 - IconImageSource

/// <summary>

/// 아이콘 이미지 소스

/// </summary>

public ImageSource IconImageSource

{

get => (ImageSource)GetValue(IconImageSourceProperty);

set => SetValue(IconImageSourceProperty, value);

}

#endregion

#region 카드 제목 - CardTitle

/// <summary>

/// 카드 제목

/// </summary>

public string CardTitle

{

get => (string)GetValue(CardTitleProperty);

set => SetValue(CardTitleProperty, value);

}

#endregion

#region 카드 설명 - CardDescription

/// <summary>

/// 카드 설명

/// </summary>

public string CardDescription

{

get => (string)GetValue(CardDescriptionProperty);

set => SetValue(CardDescriptionProperty, value);

}

#endregion

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

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

#region 생성자 - CardView()

/// <summary>

/// 생성자

/// </summary>

public CardView()

{

InitializeComponent();

this.frame.BindingContext = this;

}

#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:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <ControlTemplate x:Key="CardViewControlTemplateKey">
            <Frame
                HorizontalOptions="Center"
                VerticalOptions="Center"
                CornerRadius="10"
                BorderColor="{TemplateBinding BorderColor}"
                BackgroundColor="{TemplateBinding CardColor}"
                Padding="10"
                HasShadow="True">
                <Frame.Shadow>
                    <Shadow
                        Offset="20,20"
                        Radius="40"
                        Opacity="0.8"
                        Brush="Black" />
                </Frame.Shadow>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="75"   />
                        <RowDefinition Height="4"    />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="75"  />
                        <ColumnDefinition Width="200" />
                    </Grid.ColumnDefinitions>
                    <Frame
                        HorizontalOptions="Center"
                        VerticalOptions="Center"
                        WidthRequest="60"
                        HeightRequest="60"
                        CornerRadius="38"
                        BorderColor="{TemplateBinding BorderColor}"
                        BackgroundColor="{TemplateBinding IconBackgroundColor}"
                        IsClippedToBounds="True">
                        <Image
                            Margin="-20"
                            WidthRequest="100"
                            HeightRequest="100"
                            Aspect="AspectFill"
                            Source="{TemplateBinding IconImageSource}" />
                    </Frame>
                    <Label Grid.Column="1"
                        HorizontalTextAlignment="Start"
                        VerticalTextAlignment="Center"
                        FontAttributes="Bold"
                        FontSize="18"
                        TextColor="Black"
                        Text="{TemplateBinding CardTitle}" />
                    <BoxView Grid.Row="1" Grid.ColumnSpan="2"
                        HorizontalOptions="Fill"
                        HeightRequest="2"
                        BackgroundColor="{TemplateBinding BorderColor}" />
                    <Label Grid.Row="2" Grid.ColumnSpan="2"
                        HorizontalOptions="Fill"
                        VerticalOptions="Fill"
                        VerticalTextAlignment="Start"
                        FontAttributes="Italic"
                        Text="{TemplateBinding CardDescription}" />
                </Grid>
            </Frame>
        </ControlTemplate>
        <Style TargetType="local:CardView">
            <Setter Property="ControlTemplate" Value="{StaticResource CardViewControlTemplateKey}" />
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <local:CardView
            HorizontalOptions="Center"
            BorderColor="DarkGray"
            IconBackgroundColor="SlateGray"
            IconImageSource="dotnet_bot.png"
            CardTitle="John Doe"
            CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum." />
        <local:CardView
            HorizontalOptions="Center"
            BorderColor="DarkGray"
            IconBackgroundColor="SlateGray"
            IconImageSource="dotnet_bot.png"
            CardTitle="Jane Doe"
            CardDescription="Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia." />
    </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:local="clr-namespace:TestProject">

<ContentPage.Resources>

<Frame

HorizontalOptions="Center"

VerticalOptions="Center"

CornerRadius="10"

BorderColor="{TemplateBinding BorderColor}"

BackgroundColor="{TemplateBinding CardColor}"

Padding="10"

HasShadow="True">

<Frame.Shadow>

<Shadow

Offset="20,20"

Radius="40"

Opacity="0.8"

Brush="Black" />

</Frame.Shadow>

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Frame

HorizontalOptions="Center"

VerticalOptions="Center"

WidthRequest="60"

HeightRequest="60"

CornerRadius="38"

BorderColor="{TemplateBinding BorderColor}"

BackgroundColor="{TemplateBinding IconBackgroundColor}"

IsClippedToBounds="True">

<Image

Margin="-20"

WidthRequest="100"

HeightRequest="100"

Aspect="AspectFill"

Source="{TemplateBinding IconImageSource}" />

</Frame>

<Label Grid.Column="1"

HorizontalTextAlignment="Start"

VerticalTextAlignment="Center"

FontAttributes="Bold"

FontSize="18"

TextColor="Black"

Text="{TemplateBinding CardTitle}" />

<BoxView Grid.Row="1" Grid.ColumnSpan="2"

HorizontalOptions="Fill"

HeightRequest="2"

BackgroundColor="{TemplateBinding BorderColor}" />

<Label Grid.Row="2" Grid.ColumnSpan="2"

HorizontalOptions="Fill"

VerticalOptions="Fill"

VerticalTextAlignment="Start"

FontAttributes="Italic"

Text="{TemplateBinding CardDescription}" />

</Grid>

</Frame>

</ControlTemplate>

</Style>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<local:CardView

HorizontalOptions="Center"

BorderColor="DarkGray"

IconBackgroundColor="SlateGray"

IconImageSource="dotnet_bot.png"

CardTitle="John Doe"

CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum." />

<local:CardView

HorizontalOptions="Center"

BorderColor="DarkGray"

IconBackgroundColor="SlateGray"

IconImageSource="dotnet_bot.png"

CardTitle="Jane Doe"

CardDescription="Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia." />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] StyleSheet 엘리먼트 : Source 속성을 사용해 CSS 파일 로드하기

■ StyleSheet 엘리먼트의 Source 속성을 사용해 CSS 파일을 로드하는 방법을 보여준다. ▶ App.xaml


<Application x:Class="TestProject.App"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Application.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </Application.Resources>
</Application>

<Application x:Class="TestProject.App"

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

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

<Application.Resources>

</Application.Resources>

</Application>

[C#/MAUI/.NET6] 대소문자 구분없는 엘리먼트>엘리먼트 선택기를 사용해 시각적 트리의 직접 자식 엘리먼트 선택하기

■ 대소문자 구분없는 엘리먼트>엘리먼트 선택기를 사용해 시각적 트리의 직접 자식 엘리먼트를 선택하는 방법을 보여준다. ▶ style.css


stacklayout>image
{
    width: 200;
    height: 200;
}

stacklayout>image

{

width: 200;

height: 200;

}

▶ MainPage.xaml


<StackLayout
    HorizontalOptions="Center"
    VerticalOptions="Center">
    <Image Source="dotnet_bot.png" />
</StackLayout>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center">

</StackLayout>

※ StackLayout

[C#/MAUI/.NET6] 대소문자 구분없는 엘리먼트 엘리먼트 선택기를 사용해 시각적 트리의 자식 엘리먼트 선택하기

■ 대소문자 구분없는 엘리먼트 엘리먼트 선택기를 사용해 시각적 트리의 자식 엘리먼트을 선택하는 방법을 보여준다. ▶ style.css


listview image
{
    width: 60;
    height: 60;
}

listview image

{

width: 60;

height: 60;

}

▶ MainPage.xaml


<StackLayout>
    <ListView ...>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid>
                        ...
                        <Image ... />
                        ...
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</StackLayout>

<ListView.ItemTemplate>

<Grid>

...

...

</Grid>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</StackLayout>

※ ListView

[C#/MAUI/.NET6] 대소문자 구분하는 .class 선택기를 사용해 특정 클래스 속성을 가진 엘리먼트 선택하기

■ 대소문자 구분하는 .class 선택기를 사용해 특정 클래스 속성을 가진 엘리먼트를 선택하는 방법을 보여준다. ▶ style.css


.detailPageTitle
{
    text-align: center;
    font-size: 14;
    font-style: italic;
}

.detailPageSubtitle
{
    text-align: center;
    font-style: italic;
}

.detailPageTitle

{

text-align: center;

font-size: 14;

font-style: italic;

}

.detailPageSubtitle

{

text-align: center;

font-style: italic;

}

▶ MainPage.xaml


<ScrollView>
    <StackLayout>
        <Label ... StyleClass="detailPageTitle"   />
        <Label ... StyleClass="detailPageSubtitle"/>
    </StackLayout>
</ScrollView>

</StackLayout>

</ScrollView>

[C#/MAUI/.NET6] 대소문자 구분하는 #id 선택기를 사용해 시각적 트리의 개별 엘리먼트 선택하기

■ 대소문자 구분하는 #id 선택기를 사용해 시각적 트리의 개별 엘리먼트를 선택하는 방법을 보여준다. ▶ style.css


#listView
{
    background-color: lightgray;
}

#listView

{

background-color: lightgray;

}

▶ MainPage.xaml


<StackLayout>
    <ListView x:Name="listView">
        ...
    </ListView>
</StackLayout>

...

</ListView>

</StackLayout>

[C#/MAUI/.NET6] 대소문자 구분없는 엘리먼트 선택기를 사용해 시각적 트리의 엘리먼트를 타입별로 선택하기

■ 대소문자 구분없는 엘리먼트 선택기를 사용해 시각적 트리의 엘리먼트를 타입별로 선택하는 방법을 보여준다. ▶ 예제 코드 (CSS)


stacklayout
{
    margin: 20;
}

stacklayout

{

margin: 20;

}

※ 스타일 시트를 사용하는

[C#/MAUI/.NET6] 대소문자 구분없는 ^base 선택기를 사용해 기본 클래스에서 시각적 트리의 엘리먼트 선택하기

■ 대소문자 구분없는 ^base 선택기를 사용해 기본 클래스에서 시각적 트리의 엘리먼트를 선택하는 방법을 보여준다. ▶ 예제 코드 (CSS)


^contentpage
{
    background-color: lightgray;
}

^contentpage

{

background-color: lightgray;

}

※ 스타일 시트를

[C#/MAUI/.NET6] StyleSheet 클래스 : FromReader 정적 메소드를 사용해 스타일 시트 설정하기

■ StyleSheet 클래스의 FromReader 정적 메소드를 사용해 스타일 시트를 설정하는 방법을 보여준다. ▶ 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">
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <Button
            HorizontalOptions="Center"
            Margin="10"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            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">

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<Button

HorizontalOptions="Center"

Margin="10"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

</StackLayout>

</ContentPage>

▶ MainPage.xaml.cs


using Microsoft.Maui.Controls.StyleSheets;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        string css = @"
^contentpage
{
    background-color: blue;
}

^stacklayout
{
    background-color: red;
}
";

        using(StringReader reader = new StringReader(css))
        {
            Resources.Add(StyleSheet.FromReader(reader));
        }
    }

    #endregion
}

using Microsoft.Maui.Controls.StyleSheets;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public partial class MainPage : ContentPage

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

string css = @"

^contentpage

{

background-color: blue;

}

^stacklayout

{

background-color: red;

}

using(StringReader reader = new StringReader(css))

{

Resources.Add(StyleSheet.FromReader(reader));

}

#endregion

}

TestProject.zip

[C#/MAUI/.NET6] StyleSheet 엘리먼트 : CDATA 섹션을 사용해 스타일 시트 설정하기

■ StyleSheet 엘리먼트의 CDATA 섹션을 사용해 스타일 시트를 설정하는 방법을 보여준다. ▶ 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>
        <StyleSheet>
<![CDATA[
^contentpage
{
    background-color: blue;
}

^stacklayout
{
    background-color: orange;
}
]]>
        </StyleSheet>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <Button
            HorizontalOptions="Center"
            Margin="10"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            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>

<![CDATA[

^contentpage

{

background-color: blue;

}

^stacklayout

{

background-color: orange;

}

]]>

</StyleSheet>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<Button

HorizontalOptions="Center"

Margin="10"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] StyleSheet 엘리먼트 : Source 속성을 사용해 스타일 시트 설정하기

■ StyleSheet 엘리먼트의 Source 속성을 사용해 스타일 시트를 설정하는 방법을 보여준다. ▶ Resources/style.css


^contentpage
{
    background-color: blue;
}

^stacklayout
{
    background-color: yellow;
}

^contentpage

{

background-color: blue;

}

^stacklayout

{

background-color: yellow;

}

▶ 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>
        <StyleSheet Source="/Resources/style.css" />
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Margin="10">
        <Button
            HorizontalOptions="Center"
            Margin="10"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            Text="테스트" />
        <Button
            Margin="10"
            HorizontalOptions="Center"
            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>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Margin="10">

<Button

HorizontalOptions="Center"

Margin="10"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

<Button

Margin="10"

HorizontalOptions="Center"

Text="테스트" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] VisualElement 엘리먼트 : StyleClass 속성을 사용해 스타일 클래스 설정하기 (프리뷰 버전 오류)

■ VisualElement 엘리먼트의 StyleClass 속성을 사용해 스타일 클래스를 설정하는 방법을 보여준다. ▶ 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 Class="Separator" TargetType="BoxView">
            <Setter Property="HeightRequest"   Value="1"       />
            <Setter Property="BackgroundColor" Value="#cccccc" />
        </Style>
        <Style Class="Rounded" TargetType="BoxView">
            <Setter Property="CornerRadius"    Value="10"      />
            <Setter Property="BackgroundColor" Value="#1faece" />
        </Style>
        <Style Class="Circle" TargetType="BoxView">
            <Setter Property="WidthRequest"    Value="100"     />
            <Setter Property="HeightRequest"   Value="100"     />
            <Setter Property="CornerRadius"    Value="50"      />
            <Setter Property="BackgroundColor" Value="#1faece" />
        </Style>
        <Style Class="Rotated" TargetType="VisualElement"
            ApplyToDerivedTypes="true">
            <Setter Property="Rotation" Value="45" />
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="30">
        <BoxView
            StyleClass="Separator"
            HorizontalOptions="Center"/>
        <BoxView
            StyleClass="Rounded,Rotated"
            HorizontalOptions="Center"
            WidthRequest="100"
            HeightRequest="100" />
        <BoxView
            StyleClass="Circle"
            HorizontalOptions="Center" />
    </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>

<Style Class="Rotated" TargetType="VisualElement"

ApplyToDerivedTypes="true">

</Style>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="30">

<BoxView

StyleClass="Separator"

HorizontalOptions="Center"/>

<BoxView

StyleClass="Rounded,Rotated"

HorizontalOptions="Center"

WidthRequest="100"

HeightRequest="100" />

<BoxView

StyleClass="Circle"

HorizontalOptions="Center" />

</StackLayout>

</ContentPage>

※ 프리뷰 버전 테스트시, StyleClass 속성이 "Rounded,Rotated"와 "Circle"인

[C#/MAUI/.NET6] Style 엘리먼트 : BaseResourceKey 속성을 사용해 동적 스타일 상속하기

■ Style 엘리먼트의 BaseResourceKey 속성을 사용해 동적 스타일을 상속하는 방법을 보여준다. ▶ 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="BaseSearchBarStyleKey" TargetType="SearchBar">
            <Setter Property="BackgroundColor" Value="Gray" />
        </Style>
        <Style x:Key="BlueSearchBarStyleKey" TargetType="SearchBar" BaseResourceKey="BaseSearchBarStyleKey">
            <Setter Property="FontAttributes"   Value="Italic" />
            <Setter Property="PlaceholderColor" Value="Blue"   />
        </Style>
        <Style x:Key="RedSearchBarStyleKey" TargetType="SearchBar" BaseResourceKey="BaseSearchBarStyleKey">
            <Setter Property="FontAttributes"   Value="None" />
            <Setter Property="PlaceholderColor" Value="Red"  />
        </Style>
        <Style x:Key="SearchBarStyleKey" TargetType="SearchBar">
            <Setter Property="BackgroundColor"  Value="Gray"   />
            <Setter Property="FontAttributes"   Value="Italic" />
            <Setter Property="PlaceholderColor" Value="Blue"   />
        </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>

</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["RedSearchBarStyleKey"])
        {
            Resources["SearchBarStyleKey"] = Resources["BlueSearchBarStyleKey"];
        }
        else
        {
            Resources["SearchBarStyleKey"] = Resources["RedSearchBarStyleKey"];
        }
    }

    #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["RedSearchBarStyleKey"])

{

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

}

else

{

Resources["SearchBarStyleKey"] = Resources["RedSearchBarStyleKey"];

}

#endregion

}

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] Style 엘리먼트 : BasedOn 속성을 사용해 스타일 상속하기

■ Style 엘리먼트의 BasedOn 속성을 사용해 스타일을 상속하는 방법을 보여준다. ▶ 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="BastStyleKey" TargetType="View">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions"   Value="Center" />
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <StackLayout.Resources>
            <Style x:Key="LabelStyleKey" TargetType="Label" BasedOn="{StaticResource BastStyleKey}">
                <Setter Property="FontSize"       Value="18"     />
                <Setter Property="FontAttributes" Value="Italic" />
                <Setter Property="TextColor"      Value="Teal"   />
            </Style>
            <Style x:Key="ButtonStyleKey" TargetType="Button" BasedOn="{StaticResource BastStyleKey}">
                <Setter Property="BorderColor"  Value="Lime" />
                <Setter Property="CornerRadius" Value="5"    />
                <Setter Property="BorderWidth"  Value="5"    />
                <Setter Property="WidthRequest" Value="200"  />
                <Setter Property="TextColor"    Value="Teal" />
            </Style>
        </StackLayout.Resources>
        <Label
            Style="{StaticResource LabelStyleKey}"
            Text="This label uses style inheritance" />
        <Button
            Style="{StaticResource ButtonStyleKey}"
            Text="This button uses style inheritance" />
    </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>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<StackLayout.Resources>

</Style>

</Style>

</StackLayout.Resources>

<Label

Style="{StaticResource LabelStyleKey}"

Text="This label uses style inheritance" />

<Button

Style="{StaticResource ButtonStyleKey}"

Text="This button uses style inheritance" />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Style 엘리먼트 : ApplyToDerivedTypes 속성을 사용해 파생 클래스에 스타일 설정하기

■ Style 엘리먼트의 ApplyToDerivedTypes 속성을 사용해 파생 클래스에 스타일을 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<Style TargetType="Button"
    ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="Red" />
</Style>

<Style TargetType="Button"

ApplyToDerivedTypes="True">

</Style>

[C#/MAUI/.NET6] Style 엘리먼트 : Triggers 속성을 사용해 스타일에서 트리거 설정하기

■ Style 엘리먼트의 Triggers 속성을 사용해 스타일에서 트리거를 설정하는 방법을 보여준다. ▶ 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 TargetType="Entry">
            <Style.Triggers>
                <Trigger
                    TargetType="Entry"
                    Property="IsFocused"
                    Value="True">
                    <Setter Property="BackgroundColor" Value="Yellow" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </ContentPage.Resources>
    <StackLayout
        HorizontalOptions="Center"
        VerticalOptions="Center"
        Spacing="10">
        <Entry
            HorizontalOptions="Center"
            WidthRequest="300"
            Placeholder="이름을 입력해 주시기 바랍니다." />
        <Entry
            HorizontalOptions="Center"
            WidthRequest="300"
            Placeholder="장소를 입력해 주시기 바랍니다." />
    </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.Triggers>

<Trigger

TargetType="Entry"

Property="IsFocused"

Value="True">

</Trigger>

</Style.Triggers>

</Style>

</ContentPage.Resources>

<StackLayout

HorizontalOptions="Center"

VerticalOptions="Center"

Spacing="10">

<Entry

HorizontalOptions="Center"

WidthRequest="300"

Placeholder="이름을 입력해 주시기 바랍니다." />

<Entry

HorizontalOptions="Center"

WidthRequest="300"

Placeholder="장소를 입력해 주시기 바랍니다." />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Shell 엘리먼트 : FlyoutItem 및 MenuItem를 위한 3가지 스타일 클래스 사용하기

■ Shell 엘리먼트에서 FlyoutItem 및 MenuItem를 위한 3가지 스타일 클래스를 사용하는 방법을 보여준다. ▶ AppShell.xaml


<?xml version="1.0" encoding="utf-8" ?>
<Shell x:Class="TestProject.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestProject">
    <Shell.Resources>
        <Style TargetType="Label" Class="FlyoutItemLabelStyle">
            <Setter Property="Margin"    Value="10"    />
            <Setter Property="TextColor" Value="Black" />
        </Style>
        <Style TargetType="Image" Class="FlyoutItemImageStyle">
            <Setter Property="Margin" Value="10"   />
            <Setter Property="Aspect" Value="Fill" />
        </Style>
        <Style TargetType="Layout" Class="FlyoutItemLayoutStyle"
            ApplyToDerivedTypes="True">
            <Setter Property="BackgroundColor" Value="Teal" />
        </Style>
    </Shell.Resources>
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab
            Icon="sample1.png"
            Title="고양이/개">
            <ShellContent
                Icon="sample2.png"
                Title="고양이"
                ContentTemplate="{DataTemplate local:CatPage}" />
            <ShellContent
                Icon="sample3.png"
                Title="개"
                ContentTemplate="{DataTemplate local:DogPage}" />
        </Tab>
        <ShellContent
            Icon="sample1.png"
            Title="원숭이"
            ContentTemplate="{DataTemplate local:MonkeyPage}" />
        <ShellContent
            Icon="sample2.png"
            Title="코끼리"
            ContentTemplate="{DataTemplate local:ElephantPage}" />
        <ShellContent
            Icon="sample3.png"
            Title="곰"
            ContentTemplate="{DataTemplate local:BearPage}" />
    </FlyoutItem>
    <ShellContent
        Icon="sample1.png"
        Title="정보"
        ContentTemplate="{DataTemplate local:AboutPage}" />
    <MenuItem x:Name="helpMenuItem"
        Text="도움말"
        IconImageSource="sample2.png" />
</Shell>

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

<Shell x:Class="TestProject.AppShell"

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

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

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

<Shell.Resources>

</Style>

</Style>

<Style TargetType="Layout" Class="FlyoutItemLayoutStyle"

ApplyToDerivedTypes="True">

</Style>

</Shell.Resources>

<Tab

Icon="sample1.png"

Title="고양이/개">

<ShellContent

Icon="sample2.png"

Title="고양이"

ContentTemplate="{DataTemplate local:CatPage}" />

<ShellContent

Icon="sample3.png"

Title="개"

ContentTemplate="{DataTemplate local:DogPage}" />

</Tab>

<ShellContent

Icon="sample1.png"

Title="원숭이"

ContentTemplate="{DataTemplate local:MonkeyPage}" />

<ShellContent

Icon="sample2.png"

Title="코끼리"

ContentTemplate="{DataTemplate local:ElephantPage}" />

<ShellContent

Icon="sample3.png"

Title="곰"

ContentTemplate="{DataTemplate local:BearPage}" />

</FlyoutItem>

<ShellContent

Icon="sample1.png"

Title="정보"

ContentTemplate="{DataTemplate local:AboutPage}" />

<MenuItem x:Name="helpMenuItem"

Text="도움말"

IconImageSource="sample2.png" />

</Shell>

TestProject.zip

[C#/MAUI/.NET6] AppThemeBinding 태그 확장 사용하기

■ AppThemeBinding 태그 확장를 사용하는 방법을 보여준다. ▶ 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="LabelStyleKey" TargetType="Label">
            <Setter Property="TextColor" Value="{AppThemeBinding Black, Light=Blue, Dark=Teal}" />
        </Style>
    </ContentPage.Resources>
    <StackLayout
        Margin="10"
        HorizontalOptions="Center"
        VerticalOptions="Center">
        <Label
            HorizontalOptions="Center"
            TextColor="{AppThemeBinding Light=Green, Dark=Red}"
            Text="This text is green in light mode, and red in dark mode." />
        <Label
            Style="{StaticResource LabelStyleKey}"
            Margin="0,50,0,0"
            HorizontalOptions="Center"
            Text="This text is black by default, blue in light mode, and teal in dark mode." />
    </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>

</ContentPage.Resources>

<StackLayout

Margin="10"

HorizontalOptions="Center"

VerticalOptions="Center">

<Label

HorizontalOptions="Center"

TextColor="{AppThemeBinding Light=Green, Dark=Red}"

Text="This text is green in light mode, and red in dark mode." />

<Label

Style="{StaticResource LabelStyleKey}"

Margin="0,50,0,0"

HorizontalOptions="Center"

Text="This text is black by default, blue in light mode, and teal in dark mode." />

</StackLayout>

</ContentPage>

TestProject.zip

[C#/MAUI/.NET6] Style 엘리먼트 : TargetType 속성을 사용해 Button 엘리먼트 스타일 설정하기

■ Style 엘리먼트의 TargetType 속성을 사용해 Button 엘리먼트 스타일을 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<ResourceDictionary>
    <Color x:Key="PrimaryColorKey">#512bdf</Color>
    <Color x:Key="SecondaryColorKey">White</Color>
    <Style TargetType="Button">
        <Setter Property="TextColor"       Value="{DynamicResource SecondaryColorKey}" />
        <Setter Property="FontFamily"      Value="OpenSansRegular"                     />
        <Setter Property="BackgroundColor" Value="{DynamicResource PrimaryColorKey}"   />
        <Setter Property="Padding"         Value="14,10"                               />
    </Style>
</ResourceDictionary>

<Color x:Key="SecondaryColorKey">White</Color>

</Style>

</ResourceDictionary>

[C#/MAUI/.NET6] Style 엘리먼트 : TargetType 속성을 사용해 Label 엘리먼트 스타일 설정하기

■ Style 엘리먼트의 TargetType 속성을 사용해 Label 엘리먼트 스타일을 설정하는 방법을 보여준다. ▶ 예제 코드 (XAML)


<ResourceDictionary>
    <Color x:Key="PrimaryColorKey">#512bdf</Color>
    <Style TargetType="Label">
        <Setter Property="TextColor"  Value="{DynamicResource PrimaryColorKey}" />
        <Setter Property="FontFamily" Value="OpenSansRegular"                   />
    </Style>
</ResourceDictionary>

</Style>

</ResourceDictionary>

[C#/WINFORM/SCOTTPLOT] Plot 클래스 : Style 메소드를 사용해 Seaborn 스타일 차트 만들기

■ Plot 클래스의 Style 메소드를 사용해 Seaborn 스타일 차트를 만드는 방법을 보여준다. ▶ MainForm.cs


using System.Windows.Forms;

using ScottPlot;

namespace TestProject
{
    /// <summary>
    /// 메인 폼
    /// </summary>
    public partial class MainForm : Form
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainForm()

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

            Plot plot = new Plot(800, 600);

            plot.AddSignal(DataGen.Sin(51));
            plot.AddSignal(DataGen.Cos(51));

            plot.Style(Style.Seaborn);
            plot.Title("Style.Seaborn");
            plot.XLabel("X축");
            plot.YLabel("Y축");

            this.formsPlot.Reset(plot);

            this.formsPlot.Refresh();
        }

        #endregion
    }
}

using System.Windows.Forms;

using ScottPlot;

namespace TestProject

{

/// <summary>

/// 메인 폼

/// </summary>

public partial class MainForm : Form

{

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

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

#region 생성자 - MainForm()

/// <summary>

/// 생성자

/// </summary>

public MainForm()

{

InitializeComponent();

Plot plot = new Plot(800, 600);

plot.AddSignal(DataGen.Sin(51));

plot.AddSignal(DataGen.Cos(51));

plot.Style(Style.Seaborn);

plot.Title("Style.Seaborn");

plot.XLabel("X축");

plot.YLabel("Y축");

this.formsPlot.Reset(plot);

this.formsPlot.Refresh();

}

#endregion

}

TestProject.zip

[C#/WINFORM/SCOTTPLOT] Plot 클래스 : Style 메소드를 사용해 Black 스타일 차트 만들기

■ Plot 클래스의 Style 메소드를 사용해 Black 스타일 차트를 만드는 방법을 보여준다. ▶ MainForm.cs


using System.Windows.Forms;

using ScottPlot;

namespace TestProject
{
    /// <summary>
    /// 메인 폼
    /// </summary>
    public partial class MainForm : Form
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainForm()

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

            Plot plot = new Plot(800, 600);

            plot.AddSignal(DataGen.Sin(51));
            plot.AddSignal(DataGen.Cos(51));

            plot.Style(Style.Black);
            plot.Title("Style.Black");
            plot.XLabel("X축");
            plot.YLabel("Y축");

            this.formsPlot.Reset(plot);

            this.formsPlot.Refresh();
        }

        #endregion
    }
}

using System.Windows.Forms;

using ScottPlot;

namespace TestProject

{

/// <summary>

/// 메인 폼

/// </summary>

public partial class MainForm : Form

{

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

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

#region 생성자 - MainForm()

/// <summary>

/// 생성자

/// </summary>

public MainForm()

{

InitializeComponent();

Plot plot = new Plot(800, 600);

plot.AddSignal(DataGen.Sin(51));

plot.AddSignal(DataGen.Cos(51));

plot.Style(Style.Black);

plot.Title("Style.Black");

plot.XLabel("X축");

plot.YLabel("Y축");

this.formsPlot.Reset(plot);

this.formsPlot.Refresh();

}

#endregion

}

TestProject.zip