첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
본 블로그는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 블로그 콘텐츠 향상을 위해 쓰여집니다.

728x90
반응형
728x170

TestProject.zip
0.02MB

▶ Item.cs

using System.Windows.Input;

namespace TestProject
{
    /// <summary>
    /// 항목
    /// </summary>
    public class Item
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 텍스트 - Text

        /// <summary>
        /// 텍스트
        /// </summary>
        public string Text { get; set; }

        #endregion
        #region 명령 - Command

        /// <summary>
        /// 명령
        /// </summary>
        public ICommand Command { get; set; }

        #endregion
    }
}

 

728x90

 

▶ 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:muxc="using:Microsoft.UI.Xaml.Controls"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16"
    Loaded="Page_Loaded">
    <Page.Resources>
        <Style x:Key="HorizontalSwipe" TargetType="ListViewItem" BasedOn="{StaticResource ListViewItemRevealStyle}">
            <Setter Property="Height"                     Value="60"      />
            <Setter Property="Padding"                    Value="0"       />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment"   Value="Stretch" />
            <Setter Property="BorderThickness"            Value="0"       />
        </Style>
    </Page.Resources>
    <Grid>
        <Grid Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*"    />
            </Grid.RowDefinitions>
                <muxc:MenuBar Grid.Row="0">
                    <muxc:MenuBarItem Title="파일">
                        <MenuFlyoutItem Text="새 파일"      />
                        <MenuFlyoutItem Text="파일 열기..." />
                        <MenuFlyoutItem Text="파일 저장"    />
                        <MenuFlyoutItem Text="종료"         />
                    </muxc:MenuBarItem>
                    <muxc:MenuBarItem Title="편집">
                        <MenuFlyoutItem Name="deleteMenuFlyoutItem" />
                    </muxc:MenuBarItem>
                    <muxc:MenuBarItem Title="도움말">
                        <MenuFlyoutItem Text="정보" />
                    </muxc:MenuBarItem>
                </muxc:MenuBar>
                <ListView Name="listView" Grid.Row="1"
                    ItemContainerStyle="{StaticResource HorizontalSwipe}"
                    IsItemClickEnabled="True"
                    SelectionMode="Single"
                    Loaded="listView_Loaded"
                    ContainerContentChanging="listView_ContainerContentChanging"
                    SelectionChanged="listView_SelectionChanged">
                    <ListView.ItemTemplate>
                        <DataTemplate x:DataType="local:Item">
                            <UserControl
                                PointerEntered="userControl_PointerEntered"
                                PointerExited="userControl_PointerExited">
                                <Grid>
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="HoveringStates">
                                            <VisualState x:Name="HoverButtonsHidden" />
                                            <VisualState x:Name="HoverButtonsShown">
                                                <VisualState.Setters>
                                                    <Setter Target="hoverButton.Visibility" Value="Visible" />
                                                </VisualState.Setters>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <SwipeControl Name="ListViewSwipeContainer">
                                        <SwipeControl.RightItems>
                                            <SwipeItems Mode="Execute">
                                                <SwipeItem
                                                    Background="Red"
                                                    Command="{x:Bind Command}"
                                                    CommandParameter="{x:Bind Text}" />
                                            </SwipeItems>
                                        </SwipeControl.RightItems>
                                        <Grid VerticalAlignment="Center">
                                            <TextBlock
                                                HorizontalAlignment="Left"
                                                VerticalAlignment="Center"
                                                Margin="10"
                                                FontSize="18"
                                                Text="{x:Bind Text}" />
                                            <AppBarButton Name="hoverButton"
                                                HorizontalAlignment="Right"
                                                VerticalAlignment="Center"
                                                IsTabStop="False"
                                                Visibility="Collapsed"
                                                Command="{x:Bind Command}"
                                                CommandParameter="{x:Bind Text}" />
                                        </Grid>
                                    </SwipeControl>
                                </Grid>
                            </UserControl>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
        </Grid>
    </Grid>
</Page>

 

300x250

 

▶ MainPage.xaml.cs

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

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

        #region Field

        /// <summary>
        /// 컬렉션
        /// </summary>
        private ObservableCollection<Item> collection = new ObservableCollection<Item>();

        #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 = "StandardUICommand 클래스 사용하기";

            #endregion
        }

        #endregion

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

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            if(ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                StandardUICommand deleteCommand = new StandardUICommand(StandardUICommandKind.Delete);

                deleteCommand.ExecuteRequested += deleteCommand_ExecuteRequested;

                this.deleteMenuFlyoutItem.Command = deleteCommand;

                for(int i = 0; i < 15; i++)
                {
                    this.collection.Add(new Item { Text = $"리스트 항목 {i}", Command = deleteCommand });
                }
            }
            else
            {
                for(int i = 0; i < 15; i++)
                {
                    this.collection.Add(new Item { Text = $"리스트 항목 {i}", Command = null });
                }
            }
        }

        #endregion
        #region 삭제 명령 실행 요청시 처리하기 - deleteCommand_ExecuteRequested(sender, e)

        /// <summary>
        /// 삭제 명령 실행 요청시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void deleteCommand_ExecuteRequested(XamlUICommand sender, ExecuteRequestedEventArgs e)
        {
            if(e.Parameter != null)
            {
                foreach(Item item in this.collection)
                {
                    if(item.Text == (e.Parameter as string))
                    {
                        collection.Remove(item);

                        return;
                    }
                }
            }

            if(this.listView.SelectedIndex != -1)
            {
                this.collection.RemoveAt(this.listView.SelectedIndex);
            }
        }

        #endregion
        #region 메뉴 플라이아웃 오픈시 처리하기 - menuFlyout_Opened(sender, e)

        /// <summary>
        /// 메뉴 플라이아웃 오픈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void menuFlyout_Opened(object sender, object e)
        {
            MenuFlyout menuFlyout = sender as MenuFlyout;

            ListViewItem listViewItem = menuFlyout.Target as ListViewItem;

            listViewItem.IsSelected = true;
        }

        #endregion
        #region 리스트 뷰 로드시 처리하기 - listView_Loaded(sender, e)

        /// <summary>
        /// 리스트 뷰 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listView_Loaded(object sender, RoutedEventArgs e)
        {
            ListView listView = sender as ListView;

            this.listView.ItemsSource = this.collection;
        }

        #endregion
        #region 리스트 뷰 컨테이너 컨텐트 변경시 처리하기 - listView_ContainerContentChanging(sender, e)

        /// <summary>
        /// 리스트 뷰 컨테이너 컨텐트 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs e)
        {
            Item item = e.Item as Item;

            MenuFlyout menuFlyout = new MenuFlyout();

            menuFlyout.Opened += menuFlyout_Opened;

            MenuFlyoutItem menuFlyoutItem = new MenuFlyoutItem() { Command = item.Command };

            menuFlyout.Items.Add(menuFlyoutItem);

            e.ItemContainer.ContextFlyout = menuFlyout;
        }

        #endregion
        #region 리스트 뷰 선택 변경시 처리하기 - listView_SelectionChanged(sender, e)

        /// <summary>
        /// 리스트 뷰 선택 변경시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void listView_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if(this.listView.SelectedIndex != -1)
            {
                Item item = this.collection[this.listView.SelectedIndex];
            }
        }

        #endregion
        #region 사용자 컨트롤 포인터 진입시 처리하기 - userControl_PointerEntered(sender, e)

        /// <summary>
        /// 사용자 컨트롤 포인터 진입시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void userControl_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            if(e.Pointer.PointerDeviceType == PointerDeviceType.Mouse || e.Pointer.PointerDeviceType == PointerDeviceType.Pen)
            {
                VisualStateManager.GoToState(sender as Control, "HoverButtonsShown", true);
            }
        }

        #endregion
        #region 사용자 컨트롤 포인터 이탈시 처리하기 - userControl_PointerExited(sender, e)

        /// <summary>
        /// 사용자 컨트롤 포인터 이탈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void userControl_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            VisualStateManager.GoToState(sender as Control, "HoverButtonsHidden", true);
        }

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

댓글을 달아 주세요