Style 정의
안녕하세요.
NJHouse 입니다.
Style 정의하는 방법에 대해서 알아보겠습니다.
버튼에 배경색 과 글씨의 색을 변경하는 아주 간단한 예제를 들어 설명하겠습니다.
그전에 MainPage.xaml 에 Style정의 페이지로 이동할 버튼을 만들면서 시작하겠습니다.
MainPage.xaml
<ContentPage ...중략>
<ScrollView VerticalOption="FillAndExpand">
<StackLayout
HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand">
<Button
Text="Style 정의"
Clicked="Btn_StyleDefine_Clicked" />
</StackLayout>
</ScrollView>
</ContentPage>
Shared 프로젝트 하위에 Views 라는 폴더를 만들고, 그 하위에 StyleDefine.xaml,cs 파일을 생성합니다.
MainPage.xaml.cs 에 버튼을 눌렀을때의 이벤트 Btn_StyleDefine_Clicked를 작성해 이동이 가능 하도록 합니다.
MainPage.xaml.cs
... 중략
private async void Btn_StyleDefine_Clicked(object sender, EventArgs e) {
await Navigation.PushAsync(new StyleDefine());
}
... 중략이제 Style을 정의하고 사용할 페이지에 코드를 작성해 보겠습니다.
우선 Button 컨트롤에 직접 Style을 정의해 보죠.
/Views/StyleDefine.xaml
<ContentPage...중략>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand"
>
<!-- [1] Button에 직접 Style 정의 -->
<Button Text="Default Style"
BackGroundColor="Orange"
TextColor="White"
FontAttribute="Bold" />
</StackLayout>
</ContentPage>
이제 Style을 명시적으로 선언해 볼까요? 명시적 선언은 여러개의 컨트롤에 동일한 Style을 적용해야 할
상황에 유용합니다.
노란색 바탕의 버튼의 Style을 명시적으로 적용해 보겠습니다.
/Views/StyleDefine.xaml
<ContentPage...중략>
<!-- [2] 명시적 Style 정의 -->
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="BtnExplicitStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Yellow" />
<Setter Property="TextColor" Value="Black" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand">
<!-- [1] Button에 직접 Style 정의 -->
<Button Text="Default Style"
BackGroundColor="Orange"
TextColor="White"
FontAttribute="Bold" />
<!-- [2] -->
<Button
Text="Explicit Style"
Style="{StaticResource BtnExplicitStyle}" />
</StackLayout>
</ContentPage>
다른 페이지에서도 같은 Style이 필요할때가 있을 수 있는데요. 이 때는 App.xaml 에 명시적으로
선언을 하여 사용 할 수 있습니다. Global Style 라고 합니다.
초록색 바탕의 버튼 Style을 App.xaml 에 선언해 보겠습니다.
App.xaml
<Application ...중략>
<Application.Resources>
<ResourceDictionary>
<!-- [3] Global Style 선언 -->
<Style x:Key="BtnGlobalStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Green" />
<Setter Property="TextColor" Value="White" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application>/Views/StyleDefine.xaml
<ContentPage...중략>
<!-- [2] 명시적 Style 정의 -->
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="BtnExplicitStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Yellow" />
<Setter Property="TextColor" Value="Black" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand">
<!-- [1] Button에 직접 Style 정의 -->
<Button Text="Default Style"
BackGroundColor="Orange"
TextColor="White"
FontAttribute="Bold" />
<!-- [2] -->
<Button
Text="Explicit Style"
Style="{StaticResource BtnExplicitStyle}" />
<!-- [3] -->
<Button
Text="Global Style"
Style="{StaticResource BtnGlobalStyle}"
/>
</StackLayout>
</ContentPage>
잘 적용 되고 있네요. 여기서 생각해 볼 것이 실제 프로젝트에선 수 많은 Style이 필요합니다.
그런데 그 수많은 Style을 App.xml 에 선언을 한다고 생각하면 코드 라인이 엄청 길어지겠지요.
코드 라인이 많다는 건 상황에 따라 다를 수 있겠지만, 대부분 직관적이지 않다라고 볼 수 있을 것 같네요.
카테고리 별 파일로 따로 정의 해 놓으면 관리가 쉬울 것 같습니다. 마지막으로 파일을 분류해 정의를 하고
마치겠습니다.
우선 Shared 프로젝트에서 Styles 폴더를 만들고 그 하위에 Buttons.xaml과 Butons.xaml.cs 파일을
생성 합니다. 그리고 아래와 같이 작성 합니다.
/Styles/Buttons.xaml
<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="XFNCResolve.Share.Styles.Buttons">
<!-- [4] Behind Style -->
<Style x:Key="BtnBehindStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Blue" />
<Setter Property="TextColor" Value="White" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>
</ResourceDictionary>/Styles/Buttons.xaml.cs
...중략
public partial class Buttons : ResourceDictionary
{
public Buttons ()
{
InitializeComponent ();
}
}App.xml
<Application ...중략
xmlns:styls="clr-namespace:XFNCResolve.Share.Styles">
<Application.Resources>
<ResourceDictionary>
... 중략
<!-- [4] -->
<ResourceDictionary.MergedDictionaries>
<styls:Buttons />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application> /Views/StyleDefine.xaml
<ContentPage...중략>
<!-- [2] 명시적 Style 정의 -->
<ContentPage.Resources>
<ResourceDictionary>
<Style x:Key="BtnExplicitStyle" TargetType="Button">
<Setter Property="BackgroundColor" Value="Yellow" />
<Setter Property="TextColor" Value="Black" />
<Setter Property="FontAttributes" Value="Bold" />
</Style>
</ResourceDictionary>
</ContentPage.Resources>
<StackLayout HorizontalOptions="FillAndExpand"
VerticalOptions="CenterAndExpand">
<!-- [1] Button에 직접 Style 정의 -->
<Button Text="Default Style"
BackGroundColor="Orange"
TextColor="White"
FontAttribute="Bold" />
<!-- [2] -->
<Button
Text="Explicit Style"
Style="{StaticResource BtnExplicitStyle}" />
<!-- [3] -->
<Button
Text="Global Style"
Style="{StaticResource BtnGlobalStyle}"
/>
<!-- [4] -->
<Button
Text="Behind Style"
Style="{StaticResource BtnBehindStyle}"
/>
</StackLayout>
</ContentPage>