UWP：两个Splitview窗格 [英] UWP: Two Splitview pane

问题描述

您好，

我目前正在使用UWP，XAML和C＃为Windows 10构建应用程序。我有一个应用程序，我需要有一个菜单和一个左窗格。请参阅左侧菜单的示例：

下一个网站

窗格需要始终打开。这是我目前在MainPage.xaml中的内容：

< SplitView x：Name =" MySplitView" DISPLAYMODE = QUOT; CompactOverlay" IsPaneOpen = QUOT假QUOT; 
 CompactPaneLength =" 50" OpenPaneLength = QUOT; 200"> 
< SplitView.Pane> 
< StackPanel Background =" Gray"> 
< Button x：Name =" HamburgerButton" FontFamily =" Segoe MDL2 Assets"含量="&安培;＃xE700;" 
 Width =" 50"高度= QUOT; 50"背景= QUOT;透明"点击= QUOT; HamburgerButton_Click" /> 
< StackPanel Orientation =" Horizo​​ntal"> 
<按钮x：名称=" HomeButton" FontFamily =" Segoe MDL2 Assets"含量="&安培;＃xE10F;" 
 Width =" 50"高度= QUOT; 50"背景= QUOT;透明"点击= QUOT; HomeButton_Click" /> 
< TextBlock Text =" Accueil"字号= QUOT 18 QUOT; VerticalAlignment = QUOT;中心" /> 
< / StackPanel> 
< StackPanel Orientation =" Horizo​​ntal"> 
< Button x：Name =" CommisButton" FontFamily =" Segoe MDL2 Assets"含量="&安培;＃xE716;" 
 Width =" 50"高度= QUOT; 50"背景= QUOT;透明"点击= QUOT; CommisButton_Click" /> 
< TextBlock Text =" Commis"字号= QUOT 18 QUOT; VerticalAlignment = QUOT;中心" /> 
< / StackPanel> 
< StackPanel Orientation =" Horizo​​ntal"> 
< Button x：Name =" CommentsButton" FontFamily =" Segoe MDL2 Assets"含量="&安培;＃xE8BD;" 
 Width =" 50"高度= QUOT; 50"背景= QUOT;透明"点击= QUOT; CommentsButton_Click" /> 
< TextBlock Text =" Commentaires"字号= QUOT 18 QUOT; VerticalAlignment = QUOT;中心" /> 
< / StackPanel> 
< StackPanel Orientation =" Horizo​​ntal"> 
< Button x：Name =" SettingsButton" FontFamily =" Segoe MDL2 Assets"含量="&安培;＃xE713;" 
 Width =" 50"高度= QUOT; 50"背景= QUOT;透明"点击= QUOT; SettingsButton_Click" /> 
< TextBlock Text ="Paramètres"字号= QUOT 18 QUOT; VerticalAlignment = QUOT;中心" /> 
< / StackPanel> 
< / StackPanel> 
< /SplitView.Pane> 
< SplitView.Content> 
<！ - 我的内容 - > 
< /SplitView.Content> 
< / SplitView> 

我试图制作另一个SplitView.Pane，但它没有成功。我需要一种制作左侧面板的方法，就是这样！

谢谢

---

FORUM MSDN Microsoft FelixINX _ DevINX

解决方案

我不知道如何使用"SplitView"来做到这一点;但我首先想到的是使用一个包含3列和一行的Grid面板。

像这样：

<网格和GT; 
< Grid.ColumnDefinitions> 
< ColumnDefinition Width =" *" /> 
< ColumnDefinition Width =" *" /> 
< ColumnDefinition Width =" *" /> 
< /Grid.ColumnDefinitions> 
 
< Grid Grid.Column =" 0"> 
<！ - 左面板 - > 
< / Grid> 
 
< Grid Grid.Column =" 1"> 
<！ - 中间面板 - > 
< / Grid> 
 
< Grid Grid.Column =" 2"> 
<！ - 右侧面板 - > 
< / Grid> 
< / Grid> 

问候，

David

Hello,

I am currently building app for Windows 10 using UWP, XAML and C#. I have an app, in which I need to have a menu, and a left pane. See this example of left menu :

The Next Web

The pane needs to be always open. This is what I currently have in my MainPage.xaml:

<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay"  IsPaneOpen="False" 
               CompactPaneLength="50" OpenPaneLength="200">
        <SplitView.Pane>
            <StackPanel Background="Gray">
                <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;"
                    Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="HomeButton" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"
                    Width="50" Height="50" Background="Transparent" Click="HomeButton_Click"/>
                    <TextBlock Text="Accueil" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="CommisButton" FontFamily="Segoe MDL2 Assets" Content="&#xE716;"
                        Width="50" Height="50" Background="Transparent" Click="CommisButton_Click"/>
                    <TextBlock Text="Commis" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="CommentsButton" FontFamily="Segoe MDL2 Assets" Content="&#xE8BD;"
                        Width="50" Height="50" Background="Transparent" Click="CommentsButton_Click"/>
                    <TextBlock Text="Commentaires" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
                <StackPanel Orientation="Horizontal">
                    <Button x:Name="SettingsButton" FontFamily="Segoe MDL2 Assets" Content="&#xE713;"
                        Width="50" Height="50" Background="Transparent" Click="SettingsButton_Click"/>
                    <TextBlock Text="Paramètres" FontSize="18" VerticalAlignment="Center" />
                </StackPanel>
            </StackPanel>
        </SplitView.Pane>
        <SplitView.Content>
            <!-- My Content -->
        </SplitView.Content>
    </SplitView>

I have tried to make another SplitView.Pane but it doesn’t succeed. I need a way to make a left panel, thats it!

Thanks

---

FORUM MSDN Microsoft FelixINX _ DevINX

解决方案

Hi,

I'm not sure how to do this using a "SplitView" but the first thing came to my mind was to use a Grid panel with 3 columns and one row.

Like this:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Grid Grid.Column="0">
        <!-- Left panel -->
    </Grid>

    <Grid Grid.Column="1">
        <!-- Middle panel -->
    </Grid>

    <Grid Grid.Column="2">
        <!-- Right panel -->
    </Grid>
</Grid>

Regards,

David

这篇关于UWP：两个Splitview窗格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！