UWPアプリケーションテンプレート

Question

私は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の事を知っています）

• Before clicking
• 0123：電子メールのようにいくつかのフィールドとデータ、Windowsの10アプリで

どうすれば実装できますか？ どこでチュートリアルなどを読むことができますか？

ありがとうございました！

Answer 1

これはUWPの典型的なマスター/ディテールデザインで、公式Master/detail sampleを参照することができます。ワイドスクリーンモードではContentPresenterを使用して詳細を表示し、狭い画面モードではパラメータでナビゲートします詳細ページに移動します。公式のサンプルはとても分かりやすいので、チェックをすることができます。

あなたの最初の画像から、私はあなたがあなたのGridViewを置き換えるためにListViewを使用することができると思う、両方のコントロールのために、あなたはItemClickイベントを使用する場合は、忘れないでください、詳細を表示しSelectionChangedまたはItemClickイベントを使用することができますIsItemClickEnabled propertyを有効にします。

Template 10をプロジェクトテンプレートとして使用していますが、このサンプルで興味がある場合は、チェックをすることもできます。