【Win10】SplitView控件

SplitView是Win10中的新控件。

用于呈現兩部分視圖。一個視圖是主要内容，另一個視圖是用于導航。（也就是通常說的漢堡菜單。）

主要結構：

<SplitView>
  <SplitView.Content>
    <!--主要内容-->
  </SplitView.Content>
  <SplitView.Pane>
    <!--漢堡菜單-->
  </SplitView.Pane>
</SplitView>

對應的執行個體如圖所示：

【Win10】SplitView控件

在上圖中，pane裡有一個listview(此時的狀态是已經點選擇展開了的，才顯示了"菜單X"等文字)。

注意幾個屬性：CompactPanelLength: Pane折疊時候的長度

　　　　　　　OpenPaneLength： Pane展開時候的長度

另外重要的一個就是DisplayMode屬性：

1.Inline：内聯：當Pane展開式，Content會直接往右移動，寬度變小

2.Overlay 覆寫：當Pane展開式，直接覆寫在Content上面。

3.CompactInline 在pane折疊的時候顯示，顯示的時候為内聯

4.CompactOverlay 在panel折疊的時候隐藏，顯示的時候為覆寫

我先畫出左上角的漢堡菜單，使得點選能夠展開/不展開

xaml：

<Button BorderThickness="0" Background="White" Click="Button_Click">
　　<Button.Content>
　　　　<TextBlock Text="&#xE700;"  FontFamily="Segoe MDL2 Assets" FontSize="24"/>
　　</Button.Content>
</Button>

背景代碼：

splitView.IsPaneOpen = !splitView.IsPaneOpen;

之後在這個漢堡菜單下面畫出清單

<ListView x:Name="lv"  Grid.Row="1" ItemsSource="{x:Bind pictures}">
　　<ListView.ItemTemplate>
　　　　<DataTemplate x:DataType="model:PictureModel">
　　　　　　<Grid>
　　　　　　　　<Grid.ColumnDefinitions>
　　　　　　　　　　<ColumnDefinition Width="Auto"/>
　　　　　　　　　　<ColumnDefinition/>
　　　　　　　　</Grid.ColumnDefinitions>
　　　　　　　　<Image Width="50" Height="50" Stretch="Uniform" VerticalAlignment="Center" Grid.Column="0">
　　　　　　　　　　<Image.Source>
　　　　　　　　　　　　<BitmapImage UriSource="{x:Bind Uri}"/>
　　　　　　　　　　</Image.Source>
            　　</Image>
          　　<TextBlock Text="{x:Bind Text}" Grid.Column="1" VerticalAlignment="Center" Margin="20,0,0,0"/>
　　　　　　</Grid>
　　　　</DataTemplate>
　　</ListView.ItemTemplate> 
</ListView>

在寫上面的時候，當時出現了個問題，提示：DataTemplate不支援直接内容。煩惱我好久，後來也不知怎麼的正常了。。

參照上一篇随筆，因為是x:Bind 使用了強類型病毒，這裡也不需要綁定DataContext，并且要寫明資料類型。

之後就是建立類并且建立對象就可以了。

PictureModel類：

public class PictureModel
{
　　public Uri Uri { get; set; }
　　public string Text { get; set; }
　　public string Details { get; set; }
}

建立對象：

ObservableCollection<PictureModel> pictures = new ObservableCollection<PictureModel>();
pictures.Add(new PictureModel() { Text = "菜單1", Uri = new Uri(@"ms-appx:///Assets/images/1.png"), Details = "描述111111" });
pictures.Add(new PictureModel() { Text = "菜單2", Uri = new Uri(@"ms-appx:///Assets/images/2.png"), Details = "描述222222" });
pictures.Add(new PictureModel() { Text = "菜單3", Uri = new Uri(@"ms-appx:///Assets/images/3.png"), Details = "描述333333" });

轉載于:https://www.cnblogs.com/yffswyf/p/4718377.html