[UWP] Slidable Menu

출처 : https://www.youtube.com/watch?v=tLO5aOdfo7k&t=3s

Microsoft Toolkit Uwp UI Controls 다운로드

MainPage.xaml

<Page x:Class="UWPSlidableMenu.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWPSlidableMenu" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:UWPToolkit ="using:Microsoft.Toolkit.Uwp.UI.Controls" mc:Ignorable="d"> <Page.Resources> <DataTemplate x:Key="ContactsTemplate"> <UWPToolkit:SlidableListItem LeftIcon="Favorite" RightIcon="Phone" HorizontalAlignment="Stretch" RightCommandRequested="SlidableListItem_RightCommandRequested" MinWidth="300" MaxWidth="800" > <Grid Background="Aqua"> <Grid.ColumnDefinitions> <ColumnDefinition Width="50"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid Grid.Column="0" Background="SkyBlue" x:Name="CheckMark" > <SymbolIcon Symbol="Mail" Foreground="White"/> </Grid> <TextBlock Grid.Column="1" Text="{Binding Title}"/> </Grid> </UWPToolkit:SlidableListItem> </DataTemplate> </Page.Resources> <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <ListView x:Name="lstView" SelectionMode="None" IsItemClickEnabled="false" HorizontalAlignment="Center" ItemsSource="{x:Bind dataSource,Mode=OneWay}" ItemTemplate="{StaticResource ContactsTemplate}"> <ListView.ItemContainerStyle> <Style TargetType="ListViewItem"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> <Setter Property="Margin" Value="0 1"/> </Style> </ListView.ItemContainerStyle> </ListView> </Grid> </Page>

MainPage.xaml.cs

using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Diagnostics; 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 UWPSlidableMenu { /// <summary> /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다. /// </summary> public sealed partial class MainPage : Page { private readonly ObservableCollection<MyItem> dataSource = new ObservableCollection<MyItem>(); class MyItem { public string Title { get; set; } } protected override void OnNavigatedTo(NavigationEventArgs e) { dataSource.Add(new MyItem() { Title = "Jae yeon lee" }); dataSource.Add(new MyItem() { Title = "kyu hwan" }); } public MainPage() { this.InitializeComponent(); } private void SlidableListItem_RightCommandRequested(object sender, EventArgs e) { Debug.WriteLine("Right Command"); } } }

결과 화면

window app으로는 효과를 눈으로 확인하기가 힘들다

핸드폰 에뮬레이터를 다운로드 받아야하는데 좀 복잡하다..

오른쪽으로 밀거나 왼쪽으로 밀면 효과가 나타나는 코드이다