UWP应用程序模板

Question

I'm developing a UWP application. The design of the UI is similar to the Email app in Windows 10 ( My app design ).

This is my XAML code:

<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>

What I need to do: When user clicks on Grid in right place of screen app show something like Fragment (I know this is Android thing) with some fields and data, like in the Email Windows 10 app:

• Before clicking
• After clicking

How I can implement this? Or where I can read tutorial or something like this?

Thank's for help!

Answer 1

It is a typical Master/Detail design in UWP, you can refer to the official Master/detail sample , when on wide-screen mode, it uses ContentPresenter to show the details, and when on narrow-screen mode, it navigates with parameter to the detail page. The official sample is so clear, you can have a check.

From your first image, I think you can use a ListView to replace your GridView , for both controls, you can use SelectionChanged or ItemClick event to show the details, if you want to use ItemClick event, please don't forget to enable the IsItemClickEnabled property .

There is a MasterDetails (Mail App) sample which uses Template 10 as project template, if you're interest in this sample, you can also have a check.