첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
728x90
반응형
728x170

TestProject.zip
0.02MB

▶ NullableBooleanToBooleanConverter.cs

using System;
using Windows.UI.Xaml.Data;

namespace TestProject
{
    /// <summary>
    /// NULL 가능한 불린값↔불린값 변환자
    /// </summary>
    public class NullableBooleanToBooleanConverter : IValueConverter
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 변환하기 - Convert(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>변환 값</returns>
        public object Convert(object sourceValue, Type targetType, object parameter, string language)
        {
            if(sourceValue is bool?)
            {
                return (bool)sourceValue;
            }

            return false;
        }

        #endregion
        #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 역변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>역변환 값</returns>
        public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)
        {
            if(sourceValue is bool)
            {
                return (bool)sourceValue;
            }

            return false;
        }

        #endregion
    }
}

 

728x90

 

▶ MenuItem.cs

using Windows.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메뉴 항목
    /// </summary>
    public class MenuItem
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 기호 - Symbol

        /// <summary>
        /// 기호
        /// </summary>
        public Symbol Symbol { get; set; }

        #endregion
        #region 제목 - Caption

        /// <summary>
        /// 제목
        /// </summary>
        public string Caption { get; set; }

        #endregion
    }
}

 

300x250

 

▶ MainPage.xaml

<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <local:NullableBooleanToBooleanConverter x:Key="NullableBooleanToBooleanConverterKey" />
        <DataTemplate x:Key="MenuItemDataTemplateKey" x:DataType="local:MenuItem">
            <StackPanel
                Margin="2 0 0 0"
                Orientation="Horizontal">
                <SymbolIcon Symbol="{x:Bind Symbol}" />
                <TextBlock
                    VerticalAlignment="Center"
                    Margin="20 0 0 0"
                    Text="{x:Bind Caption}" />
            </StackPanel>
        </DataTemplate>
    </Page.Resources>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="SystemControlBackgroundChromeMediumLowBrush" />
                <VisualState x:Name="Red">
                    <VisualState.Setters>
                        <Setter Target="splitView.PaneBackground" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Blue">
                    <VisualState.Setters>
                        <Setter Target="splitView.PaneBackground" Value="Blue" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Green">
                    <VisualState.Setters>
                        <Setter Target="splitView.PaneBackground" Value="Green" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Grid Margin="10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <SplitView Name="splitView" Grid.Column="0"
                IsPaneOpen="{x:Bind isPaneOpenToggleButton.IsChecked, Mode=TwoWay, Converter={StaticResource NullableBooleanToBooleanConverterKey}}"
                PaneBackground="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
                OpenPaneLength="{x:Bind openPaneLengthSlider.Value, Mode=OneWay}"
                CompactPaneLength="{x:Bind compactPaneLengthSlider.Value, Mode=OneWay}"
                DisplayMode="CompactOverlay"
                IsTabStop="False">
                <SplitView.Pane>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*"    />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0"
                            Style="{StaticResource BaseTextBlockStyle}"
                            Margin="60 10 0 0"
                            Text="창 컨텐트" />
                        <ListView Grid.Row="1"
                            ItemTemplate="{StaticResource MenuItemDataTemplateKey}"
                            Margin="0 10 0 0"
                            VerticalAlignment="Stretch"
                            SelectionMode="None"
                            IsItemClickEnabled="True"
                            ItemsSource="{x:Bind MenuItemCollection}"
                            ItemClick="menuListView_ItemClick" />
                        <StackPanel Grid.Row="2"
                            Margin="15 25 0 25"
                            Orientation="Horizontal">
                            <SymbolIcon Symbol="Setting" />
                            <TextBlock
                                VerticalAlignment="Center"
                                Margin="25 0 0 0"
                                Text="설정" />
                        </StackPanel>
                    </Grid>
                </SplitView.Pane>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*"    />
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0"
                        Style="{StaticResource BaseTextBlockStyle}"
                        Margin="10 10 0 0"
                        Text="SplitView 컨텐트" />
                    <TextBlock Name="contentTextBlock" Grid.Row="1"
                        Style="{StaticResource BodyTextBlockStyle}"
                        Margin="10 10 0 0" />
                </Grid>
            </SplitView>
            <StackPanel Grid.Column="2"
                Margin="0 0 10 0"
                Spacing="10">
                <ToggleButton Name="isPaneOpenToggleButton"
                    IsChecked="True"
                    Content="IsPaneOpen" />
                <ToggleSwitch
                    Margin="0 10 0 0"
                    MinWidth="120"
                    OffContent="Left"
                    OnContent="Right"
                    Header="PanePlacement"
                    Toggled="panePlacementToggleSwitch_Toggled" />
                <ComboBox Name="displayModeCombobox"
                    VerticalAlignment="Center"
                    Margin="0 5 0 0"
                    Width="196"
                    Header="DisplayMode"
                    SelectionChanged="displayModeCombobox_SelectionChanged"
                    SelectedIndex="0">
                    <ComboBoxItem>Inline</ComboBoxItem>
                    <ComboBoxItem>CompactInline</ComboBoxItem>
                    <ComboBoxItem>Overlay</ComboBoxItem>
                    <ComboBoxItem>CompactOverlay</ComboBoxItem>
                </ComboBox>
                <ComboBox Name="paneBackgroundCombobox"
                    VerticalAlignment="Center"
                    Margin="0 10 0 0"
                    Width="196"
                    Header="PaneBackground"
                    SelectionChanged="paneBackgroundCombobox_SelectionChanged"
                    SelectedIndex="0">
                    <ComboBoxItem Tag="{}{ThemeResource SystemControlBackgroundChromeMediumLowBrush}">SystemControlBackgroundChromeMediumLowBrush</ComboBoxItem>
                    <ComboBoxItem Tag="Red">Red</ComboBoxItem>
                    <ComboBoxItem Tag="Blue">Blue</ComboBoxItem>
                    <ComboBoxItem Tag="Green">Green</ComboBoxItem>
                </ComboBox>
                <Slider Name="openPaneLengthSlider"
                    Margin="0 10 0 0"
                    Width="196"
                    IsFocusEngagementEnabled="False"
                    SnapsTo="StepValues"
                    StepFrequency="8"
                    Minimum="128"
                    Maximum="500"
                    Value="256"
                    Header="OpenPaneLength" />
                <Slider Name="compactPaneLengthSlider"
                    Width="196"
                    IsFocusEngagementEnabled="False"
                    SnapsTo="StepValues"
                    StepFrequency="8"
                    Minimum="24"
                    Maximum="128"
                    Value="48"
                    Header="CompactPaneLength" />
            </StackPanel>
        </Grid>
    </Grid>
</Page>

 

▶ MainPage.xaml.cs

using System;
using System.Collections.ObjectModel;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 메뉴 항목 컬렉션
        /// </summary>
        private ObservableCollection<MenuItem> menuItemCollection =  new ObservableCollection<MenuItem>()
        {
            new MenuItem() { Caption = "인물"  , Symbol = Symbol.People  },
            new MenuItem() { Caption = "소식"  , Symbol = Symbol.Globe   },
            new MenuItem() { Caption = "메시지", Symbol = Symbol.Message },
            new MenuItem() { Caption = "메일"  , Symbol = Symbol.Mail    }
        };

        #endregion

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

        #region 메뉴 항목 컬렉션 - MenuItemCollection

        /// <summary>
        /// 메뉴 항목 컬렉션
        /// </summary>
        public ObservableCollection<MenuItem> MenuItemCollection
        {
            get
            {
                return this.menuItemCollection;
            }
        }

        #endregion

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

        #region 생성자 - MainPage()

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

            #region 윈도우 크기를 설정한다.

            double width  = 800d;
            double height = 600d;

            double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

            Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

            ApplicationView.PreferredLaunchViewSize = windowSize;

            Window.Current.Activate();

            ApplicationView.GetForCurrentView().TryResizeView(windowSize);

            #endregion
            #region 윈도우 제목을 설정한다.

            ApplicationView.GetForCurrentView().Title = "SplitView 엘리먼트 사용하기";

            #endregion
        }

        #endregion

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

        #region 메뉴 리스트 뷰 항목 클릭시 처리하기 - menuListView_ItemClick(sender, e)

        /// <summary>
        /// 메뉴 리스트 뷰 항목 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void menuListView_ItemClick(object sender, ItemClickEventArgs e)
        {
            this.contentTextBlock.Text = (e.ClickedItem as MenuItem).Caption + " 페이지";
        }

        #endregion
        #region PanePlacement 토글 스위치 토글시 처리하기 - panePlacementToggleSwitch_Toggled(object sender, RoutedEventArgs e)

        /// <summary>
        /// PanePlacement 토글 스위치 토글시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void panePlacementToggleSwitch_Toggled(object sender, RoutedEventArgs e)
        {
            ToggleSwitch toggleSwitch = sender as ToggleSwitch;

            if(toggleSwitch.IsOn)
            {
                this.splitView.PanePlacement = SplitViewPanePlacement.Right;
            }
            else
            {
                this.splitView.PanePlacement = SplitViewPanePlacement.Left;
            }
        }

        #endregion
        #region DisplayMode 콤보 박스 선택 변경시 처리하기 - displayModeCombobox_SelectionChanged(sender, e)

        /// <summary>
        /// DisplayMode 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void displayModeCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            this.splitView.DisplayMode = (SplitViewDisplayMode)Enum.Parse
            (
                typeof(SplitViewDisplayMode),
                (e.AddedItems[0] as ComboBoxItem).Content.ToString()
            );
        }

        #endregion
        #region 창 배경 콤보 박스 선택 변경시 처리하기 - paneBackgroundCombobox_SelectionChanged(sender, e)

        /// <summary>
        /// 창 배경 콤보 박스 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void paneBackgroundCombobox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            string colorString = (e.AddedItems[0] as ComboBoxItem).Content.ToString();

            VisualStateManager.GoToState(this, colorString, false);
        }

        #endregion
    }
}
728x90
반응형
그리드형(광고전용)
Posted by icodebroker

댓글을 달아 주세요