블로그 이미지
* Microsoft MVP - Windows Development 2014 ~ 2019 5ring * LINE : kaki104 * facebook : https://www.facebook.com/kaki104 https://www.facebook.com/groups/w10app/ kaki104

카테고리

List All (551)
Xamarin Forms (4)
Bot Framework (19)
Azure (9)
Windows 10 (35)
Facebook News & Tips (158)
Windows App(Universa.. (83)
Windows 8&8.1 (113)
Windows Phone 8 (42)
Silverlight (37)
HTML5 & MVC4 (16)
WPF (1)
Portable Class Library (2)
Uncategorised Tips a.. (3)
Kinect for Windows (2)
ETC (12)
kaki104 Scrap (4)
App News (11)
Total522,039
Today48
Yesterday101

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


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. 실행 후 정상 동작하는지 확인하고, 수정할 부분은 수정한다.





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


Posted by MVP kaki104

티스토리 툴바