[Uno Platform] Generic.xaml(CustomControl 사용하기)

Uno Platform에서 CustomControl 생성하는 경우가 있습니다.

WPF나 UWP에서는 작성한 CustomControl을 Generic.xaml 파일에 Merge하면 사용할 수 있으나

Uno Platform에서는 Generic.xaml 파일을 기본적으로 불러오지 않기에 직접 생성 후 작성해야 합니다.

App.xaml에 아래 코드에서 굵게 표시된 부분만 작성한다면 쉽게 이해할 수 있으며,

샘플을 돌리기 위해서는 아래 CustomControl 샘플 코드를 작성해줍니다.

샘플 코드에서 UWP, WPF와 다른점은 CircleButtonControl.cs에서 sealed를 partial로 변경해주어야 합니다.

App.xaml

<Application
    x:Class="WinUI_UnoPlatform.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI_UnoPlatform">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
                <ResourceDictionary Source="ms-appx:///Themes/Generic.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

 

Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinUI_Shared.Controls">

    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="ms-appx:///Themes/CircleButtonControl.xaml" />
    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

 

CircleButtonControl.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:WinUI_Shared.Controls"
    xmlns:local="using:WinUI_Shared">

    <Style TargetType="controls:CircleButtonControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="controls:CircleButtonControl">

                    <Grid>
                        <Ellipse
                            x:Name="myEllipse"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            Fill="{TemplateBinding Background}" />

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation
                                            Storyboard.TargetName="myEllipse"
                                            Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                            To="{Binding PressColor, RelativeSource={RelativeSource TemplatedParent}}"
                                            Duration="0:0:0" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="myEllipse"
                                            Storyboard.TargetProperty="Opacity"
                                            From="1"
                                            To="0.9"
                                            Duration="0:0:2" />
                                        <ColorAnimation
                                            Storyboard.TargetName="myEllipse"
                                            Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)"
                                            To="{Binding MouseOverColor, RelativeSource={RelativeSource TemplatedParent}}"
                                            Duration="0:0:0" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

CircleButtonControl.cs

namespace WinUI_Shared.Controls
{
    public partial class CircleButtonControl : Button
    {
        public CircleButtonControl()
        {
            this.DefaultStyleKey = typeof(CircleButtonControl);
        }

        public static readonly DependencyProperty PressColorProperty = DependencyProperty.Register(nameof(PressColor), typeof(Color), typeof(CircleButtonControl), new PropertyMetadata(Microsoft.UI.Colors.Gray));
        public static readonly DependencyProperty MouseOverColorProperty = DependencyProperty.Register(nameof(MouseOverColor), typeof(Color), typeof(CircleButtonControl), new PropertyMetadata(Microsoft.UI.Colors.LightBlue));

        public Color PressColor
        {
            get { return (Color)GetValue(PressColorProperty); }
            set { SetValue(PressColorProperty, value); }
        }
        public Color MouseOverColor
        {
            get { return (Color)GetValue(MouseOverColorProperty); }
            set { SetValue(MouseOverColorProperty, value); }
        }
    }
}