Using the MenuFlyoutPresenter style

오늘의 문제는 스타일이다. 음..일단 이미지로 보자

Move to 를 선택하면 MenuFlyout 메뉴가 화면에 출력되도록 디자인 했다.

그리고, 디자인 타임에 확인을 해보면 이쁘게 잘 보인다. 좋아좋아~

                <AppBarButton Label="move to ...">
                    <AppBarButton.Flyout>
                        <MenuFlyout>
                            <MenuFlyoutItem Command="{Binding MoveCommand, Mode=OneWay}" Text="local item to diff folder" />
                            <MenuFlyoutItem Command="{Binding MoveItemToYearFolderCommand}" Text="photo item to picture folder" />
                        </MenuFlyout>
                    </AppBarButton.Flyout>
                </AppBarButton>

디자인 작업을 완료하고 에물레이터로 실행을 해보면 아래와 같은 결과가 나온다. 

헉...이건 뭔가;;;쿨럭

아마도 원인은 Light 테마가 적용이 되어있는데도 불구하고, Windows Phone 8.1에서만 Dark 테마로 보이는 것 같다.

 으흠;;;버그인것 같은데..신고를 해야할 것 같기도 하고..음..

하여간 그래서 이 문제를 해결하기 위해, 다 방면으로 별짓 다해 보았지만..해결이 되지 않았다.

그래서, 최종 결론은 기본 스타일을 가져다가 수정해서 사용하기로 했다.

*블랜드나 VS 2013에서 스타일이 리소스로 빠지는 경우는 그걸 사용하면 되고, 그렇지 않은 경우에 아래와 같은 방법을 사용하면 된다.

1. 스타일 가져오기

검색을 통해서 style 페이지를 찾는다. 아무거나 내 마음대로 스타일을 만들어서 적용하면, 실행 중 오류가 발생하기 쉽다. 그렇기 때문에 기본 스타일을 찾아서 사용하는 것이 좋다.

MenuFlyoutPresenter styles and templates

https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn531042.aspx

대부분의 컨트롤들은 위와 같은 스타일 페이지가 존재한다.

2. 스타일 복사해서 내 기본 스타일 딕셔너리에 넣는다.

내가 사용 중인 DefaultStyle.xaml에 아래 내용을 추가했다. 기본 내용에서 수정해야하는 몇가지를 수정했다.

    <SolidColorBrush x:Key="FlyoutBackgroundThemeBrush" Color="#FFFFFFFF"/>
    <SolidColorBrush x:Key="FlyoutBorderThemeBrush" Color="#FF4d4d4d"/>
    <x:Double x:Key="FlyoutThemeMaxHeight">718</x:Double>
    <x:Double x:Key="FlyoutThemeMaxWidth">450</x:Double>
    <x:Double x:Key="FlyoutThemeMinHeight">54</x:Double>
    <x:Double x:Key="FlyoutThemeMinWidth">70</x:Double>
    <Thickness x:Key="FlyoutBorderThemeThickness">2</Thickness>
    <Thickness x:Key="MenuFlyoutPresenterThemePadding">20,5,0,5</Thickness>
   
    <Style TargetType="MenuFlyoutPresenter">
        <Setter Property="RequestedTheme" Value="Light" />
        <Setter Property="Background" Value="{ThemeResource FlyoutBackgroundThemeBrush}" />
        <Setter Property="BorderBrush" Value="{ThemeResource FlyoutBorderThemeBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource FlyoutBorderThemeThickness}" />
        <Setter Property="Padding" Value="{ThemeResource MenuFlyoutPresenterThemePadding}" />
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
        <Setter Property="MinWidth" Value="{ThemeResource FlyoutThemeMinWidth}" />
        <Setter Property="MaxWidth" Value="{ThemeResource FlyoutThemeMaxWidth}" />
        <Setter Property="MinHeight" Value="{ThemeResource FlyoutThemeMinHeight}" />
        <Setter Property="MaxHeight" Value="{ThemeResource FlyoutThemeMaxHeight}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="MenuFlyoutPresenter">
                    <Border Margin="0,0,0,5" Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                        <ScrollViewer Padding="{TemplateBinding Padding}"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                  AutomationProperties.AccessibilityView="Raw">
                            <ItemsPresenter />
                        </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

3. 실행 후 정상 동작하는지 확인하고, 수정할 부분은 수정한다.

기본 컨트롤이 마음에 안들어서 수정하고 싶다면, 이런 방법을 이용해서 수정하는 것을 권한다.