UWP SplitView 스플릿뷰 .NET

안드로이드에 Navigation Drawer 가 있듯이 UWP에도 비슷한 SplitView가 있다.






















<안드로이드의 Navigation Drawer>


















<Groove 뮤직플레이어의 SplitView>


MainPage.xaml
<Page
x:Class="SplitViewPractice.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SplitViewPractice"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView x:Name="SplitView" DisplayMode="CompactInline" IsPaneOpen="False">
<SplitView.Pane>
<StackPanel Background="DarkGray">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
</StackPanel>
</SplitView.Pane>
</SplitView>
</Grid>
</Page>

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// 빈 페이지 항목 템플릿은 http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409 에 문서화되어 있습니다.

namespace SplitViewPractice
{
/// <summary>
/// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}

private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
SplitView.IsPaneOpen = !SplitView.IsPaneOpen;
}
}
}

Segoe MDL2 Assets 폰트에 햄버거버튼 아이콘이 있다. 그 외에도 다양한 아이콘이 존재하는데 사이트 링크를 걸어 놓겠다.


만약 다른 버튼들도 추가 하고싶다면 스택패널 내부에 더 추가 하면 된다.


덧글

댓글 입력 영역