UWP下制作简单时间轴控件

0x00.相关

0x01.声明类

    class Html_TimeLineClass
    {
        public string Content { get; set; }
        public string DateTime { get; set; }
        public string Id { get; set; }
        public int Index { get; set; }
    }

0x02.自定义模板

        <DataTemplate x:Key="RightTimeLineItemTemplate">
            <ListViewItem>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="14"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions >
                    <Border Height="14" Width="14"
                                CornerRadius="6" BorderThickness="2" 
                                BorderBrush="LightGray"
                                Grid.Column="1" VerticalAlignment="Bottom">
                        <Border.Background>
                            <AcrylicBrush 
                                BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemChromeMediumColor}" TintOpacity=".7"/>
                        </Border.Background >
                    </Border >
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" 
                                Grid.Column="2">
                        <StackPanel Orientation="Vertical">
                            <StackPanel Orientation="Horizontal">
                                <HyperlinkButton Content="{Binding Id}"/>
                                <TextBlock Text="{Binding DateTime}" Margin="8,0,0,0" Foreground="Gray" VerticalAlignment="Center"/>
                            </StackPanel >
                            <TextBlock Text="{Binding Content}"/>
                            <Border Height="1" Background="LightGray" CornerRadius="2"/>
                        </StackPanel >
                    </StackPanel>
                </Grid >
            </ListViewItem >
        </DataTemplate >
        <DataTemplate x:Key="LeftTimeLineItemTemplate">
            <ListViewItem>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                        <ColumnDefinition Width="14"/>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions >
                    <Border Height="14" Width="14"
                                CornerRadius="6" BorderThickness="2" 
                                BorderBrush="LightGray"
                                Grid.Column="1" VerticalAlignment="Bottom">
                        <Border.Background>
                            <AcrylicBrush 
                                BackgroundSource="HostBackdrop" TintColor="{ThemeResource SystemChromeMediumColor}" TintOpacity=".7"/>
                        </Border.Background >
                    </Border >
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" 
                                Grid.Column="0" >
                        <StackPanel Orientation="Vertical">
                            <StackPanel Orientation="Horizontal">
                                <HyperlinkButton Content="{Binding Id}"/>
                                <TextBlock Text="{Binding DateTime}" Margin="8,0,0,0" Foreground="Gray" VerticalAlignment="Center"/>
                            </StackPanel >
                            <TextBlock Text="{Binding Content}"/>
                            <Border Height="1" Background="LightGray" CornerRadius="2"/>
                        </StackPanel >
                    </StackPanel>
                </Grid >
            </ListViewItem >
        </DataTemplate >

0x03.自定义模板选择器

XAML

        <local:TimeLineItemTemplateSelector
            x:Key="TimeLineItemTemplateSelector"
            LeftTimeLineItemTemplate="{StaticResource LeftTimeLineItemTemplate}"
            RightTimeLineItemTemplate="{StaticResource RightTimeLineItemTemplate}" />

C#

    public class TimeLineItemTemplateSelector : DataTemplateSelector
    {
        public DataTemplate LeftTimeLineItemTemplate { get; set; }
        public DataTemplate RightTimeLineItemTemplate { get; set; }
        protected override DataTemplate SelectTemplateCore(object item)
        {
            int index= ((Html_TimeLineClass)item).Index;
            if (index % 2 == 1)
                return RightTimeLineItemTemplate;
            else return LeftTimeLineItemTemplate;
        }//奇按照偶性左右分布
    }

0x04.绘制中轴和Listview容器

                <Grid>
                    <Border HorizontalAlignment="Center" Width="3" Background="Gray"
                        CornerRadius="2" Margin="0,10,0,10"/>
                    <ListView x:Name="TimeLineListview" Margin="0,10,0,10"
                               SelectionMode="None"
                               ItemContainerStyle="{StaticResource LVCstretch}" 
                               ItemTemplateSelector="{StaticResource TimeLineItemTemplateSelector}"
                               IsItemClickEnabled="True">
                    </ListView >
                </Grid >

0x05.数据绑定

TimeLineListview.ItemsSource = your datasource;

0x06.效果图

UWP控件Navigationview

0x00.规范布局

微软通过秋季更新发布了 NavigationView 控件。在此之前,实现汉堡菜单多使用Nuget上发布的类库或使用Splitview自制,但无法保持风格的一致性。

MSDN给出的实例

<NavigationView SelectionChanged="SelectionChanged">
  <NavigationView.MenuItems>
    <NavigationViewItemHeader Content="Section A" />
    <NavigationViewItem Content="Item 01" />
    <NavigationViewItem Content="Item 02" />
  </NavigationView.MenuItems>
  <Frame x:Name="NavigationFrame" />
</NavigationView>

0x01.模式

控件有三种可能的模式:最小、紧凑和扩展,每种模式都是基于带有阈值的内置和可自定义视图自动选择的。


0x02.NavigationViewItem

NavigationViewItem为NavigationView.MenuItems中item项,包含Icon,Content,Tag等常用属性。

Icon:参阅Segoe MDL2 icons提供的图标。

IsSelected:NavigationViewItem是否被选中,选中的NavigationViewItem左侧会有指示方块。如果出现默认需要选中的NavigationViewItem没有指示方块并且已设置IsSelected=true

请为NavigationViewItem添加Loading事件即可正常显示。

private void NavigationViewItem_Loading(Windows.UI.Xaml.FrameworkElement sender, object args)
{
    ((NavigationViewItem)sender).IsSelected = true;
}

0x03.NavigationViewItemSeparator

用于分隔两个NavigationViewItem。


0x04.IsSettingsVisible

Pane底部的Setting按钮是否可见。


0x05.IsPaneOpen

Pane是否展开。


0x06.SelectionChanged事件

当NavigationView中选中的NavigationViewItem改变时触发,常配合Frame控件实现导航视图。

<NavigationView x:Name="NaviView" 
                SelectionChanged="NaviView_SelectionChanged">
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Home" Content="首页" Tag="Index"/>
        <NavigationViewItem Icon="BrowsePhotos" Content="搜索" Tag="Filter" />
    </NavigationView.MenuItems >

    <Frame x:Name="RootFrame">
      <Frame.ContentTransitions>
        <TransitionCollection>
          <NavigationThemeTransition/>
        </TransitionCollection>
      </Frame.ContentTransitions>
    </Frame >
</NavigationView >
private void NaviView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
{
        NavigationViewItem item = args.SelectedItem as NavigationViewItem;
        switch (item.Tag)
        {
            case "Index":
                RootFrame.Navigate(typeof(Pages.Index_Page));
            break;

            case "Filter":
                RootFrame.Navigate(typeof(Pages.Filter_Page));
            break;

            case "Setting": 
                RootFrame.Navigate(typeof(Pages.Setting_Page)); 
            break;
        }
}

 

UWP 自定义Popup控件的自适应

0x00.前提

自定义了一个查看图片细节的控件,本质是一个Image控件,但是应为采用了左侧为NavigationView右侧为Frame的导航模式,为了使该控件能覆盖到左侧的NavigationView之上,只能采用Popup。

这也导致该控件的容器不能是Frame/Page中的Grid,从而不能直接随窗体一起拉伸,可以采用SizeChanged事件和INotifyPropertyChanged接口来实现,也可使使用MeasurePopupSize()


0x01.实现

public Image_Detail()
{
    this.InitializeComponent();
    _popup = new Popup();
    ApplicationView.GetForCurrentView().VisibleBoundsChanged += (s, e) =>
    {
        MeasurePopupSize();
    };
    MeasurePopupSize();
    _popup.Child = this;
}

private void MeasurePopupSize()
{
    this.Width = ApplicationView.GetForCurrentView().VisibleBounds.Width;
    this.Height = ApplicationView.GetForCurrentView().VisibleBounds.Height;
}