UWP 应用模板答案

【问题标题】：UWP App TemplateUWP 应用模板
【发布时间】：2016-10-10 10:17:18
【问题描述】：

我正在开发一个 UWP 应用程序。 UI 的设计类似于 Windows 10 中的电子邮件应用 (My app design)。

这是我的 XAML 代码：

<Page
x:Class="Milano.InWork"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Milano"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid BorderBrush="White" BorderThickness="1">
    <Grid.Background>
        <ImageBrush Stretch="Fill" ImageSource="Images/Background.png"/>
    </Grid.Background>
    <Grid HorizontalAlignment="Left" Height="720" VerticalAlignment="Top" Width="60" BorderBrush="#FFF5F1F1" BorderThickness="0,0,1,0">
        <Button x:Name="MenuButton" Content="" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="38" Width="38">
            <Button.Background>
                <ImageBrush Stretch="Uniform" ImageSource="Images/Menu-100.png"/>
            </Button.Background>
        </Button>
        <Button x:Name="logoutbutton" Content="" HorizontalAlignment="Left" Margin="10,650,0,0" VerticalAlignment="Top"  Height="43" Width="38">
            <Button.Background>
                <ImageBrush Stretch="Uniform" ImageSource="Images/Logout_Button.png"/>
            </Button.Background>
        </Button>

    </Grid>
    <Grid HorizontalAlignment="Left" Height="47" Margin="63,2,-121,0" VerticalAlignment="Top" Width="1338" BorderBrush="#FFFDFDFD" Padding="0,0,0,1" BorderThickness="0,0,0,1">
        <TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="В Работе" VerticalAlignment="Top" Height="47" Width="1218" FontSize="32" FontFamily="SF UI Display" Padding="550,0,0,0" Foreground="White"/>
    </Grid>
    <ScrollViewer HorizontalAlignment="Left" Height="668" Margin="63,52,0,0" VerticalAlignment="Top" Width="350">
        <GridView   x:Name="OrdersGridView" >
            <GridView.ItemTemplate>
                <DataTemplate>
                    <StackPanel >
                        <Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
                            <TextBlock Text="{Binding date_created}"  HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap"  VerticalAlignment="Top" Width="350" Height="50" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
                            <TextBlock  TextAlignment="Center"  HorizontalAlignment="Left" Margin="0,146,-1,0" TextWrapping="Wrap" Text="{Binding billing.address_1}" VerticalAlignment="Top" Height="58" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
                            <TextBlock  HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="{Binding billing.first_name}" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" Padding="0,0,0,0"/>

                        </Grid>

                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </ScrollViewer>



</Grid>

我需要做什么：当用户在屏幕应用程序的正确位置单击 Grid 时，会显示类似片段（我知道这是 Android 的东西）的一些字段和数据，例如在 Windows 10 电子邮件应用程序中：

我该如何实现呢？或者我可以在哪里阅读教程或类似的东西？

感谢您的帮助！

【问题讨论】：

这是this 问题的完全相同的副本。只是一个不同的 OP 在问这个问题。

标签： c# windows visual-studio user-controls uwp

【解决方案1】：

是UWP中典型的Master/Detail设计，可以参考官方Master/detail sample，宽屏时使用ContentPresenter显示细节，窄屏时使用ContentPresenter使用参数导航到详细信息页面。官方的样板很清楚，你可以去查一下。

从您的第一张图片中，我认为您可以使用ListView 替换您的GridView，对于这两个控件，您可以使用SelectionChanged 或ItemClick 事件来显示详细信息，如果您想使用@ 987654330@事件，请不要忘记启用IsItemClickEnabled property。

有一个MasterDetails (Mail App) sample 使用Template 10 作为项目模板，如果您对此示例感兴趣，也可以查看一下。

【讨论】：