UWP - GridView：最後の項目の後に "追加"ボタンを追加する方法は？

Question

私は写真を表示するためにGridViewを使用し、ユーザが新しい項目をフォームに追加できるようにエレガントな方法で検索します。

• フォームには多くのフィールドが含まれています。ピボットに表示され、各ピボットアイテムはフォームのカテゴリを表します。
• 一部のカテゴリには、1つ以上の子アイテムが含まれています。マスター - 詳細ページで表示されます。

写真のリストを表示する必要があるのは、写真のようにフォームの「サブサブアイテム」を表しているため、CommandBarで新しい写真の追加を管理しません。しかし、私は写真を含むGridViewの最後の項目の後に "追加"ボタンを使用したいと思います。私はのStackPanelを使用すると、私は表示された場合

<Grid> 
<Grid.RowDefinitions> 
    <RowDefinition Height="Auto" /> 
    <RowDefinition Height="*" /> 
</Grid.RowDefinitions> 
<TextBlock Text="Photos" Grid.Row="0"/> 
<StackPanel Orientation="Horizontal" Grid.Row="1"> 
    <GridView ItemsSource="{Binding images}"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Border BorderBrush="Gray" BorderThickness="1" 
         Padding="10" 
         Height="150" Width="190"> 
        <Image Stretch="UniformToFill" 
          Source="{Binding bitmap_image}" /> 
       </Border> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
    </GridView> 
    <Border BorderBrush="Gray" BorderThickness="1" 
      Padding="10" 
      Height="150" Width="190"> 
     <Button Command="{Binding Path=DataContext.AddPhotoCommand, ElementName=DetailsPage}" 
       Height="100" Width="100"> 
      <Viewbox> 
       <SymbolIcon Symbol="Add"/> 
      </Viewbox> 
     </Button> 
    </Border> 
</StackPanel> 
</Grid> 

は、[追加]ボタンは、もはや表示されている。ここで

はXAMLです。このとき

は、私は部分的にしか動作し解決策を見つけました3枚の写真...

=>これを行うより良い方法はありますか？あるいは、代替案が見えますか？私はDataTemplateSelectorを介してこれをやって探していますが、それは

Answer 1

私はのStackPanelを使用すると、私は3枚の写真を表示する場合は、[追加]ボタンは、もはや表示されている...

あなたは気にしない場合はボタンがあなたの最後の写真の次の行にあります、あなたは「窓の外に出る絵を避けるために、代わりにStackPanelのS WrapPanelとGridView内のボタンを置く」WinRTXamlToolkitを使うのFooterTemplateことができます。

XAML：

<Page 
x:Class="AddButtonSample.MainPage" 
xmlns:controls="using:WinRTXamlToolkit.Controls" 
... 
mc:Ignorable="d"> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
    </Grid.RowDefinitions> 
    <TextBlock Text="Photos" Grid.Row="0"/> 
    <controls:WrapPanel Orientation="Horizontal" Grid.Row="1"> 
     <GridView ItemsSource="{Binding images}"> 
      <GridView.FooterTemplate> 
       <DataTemplate> 
        <Button Command="{Binding Path=AddPhotoCommand}" Height="100" Width="100"> 
         <Viewbox> 
          <SymbolIcon Symbol="Add"/> 
         </Viewbox> 
        </Button> 
       </DataTemplate> 
      </GridView.FooterTemplate> 
      <GridView.ItemTemplate> 
       <DataTemplate> 
        <Border BorderBrush="Gray" BorderThickness="1" 
        Padding="10" 
        Height="150" Width="190"> 
         <Image Stretch="UniformToFill" 
         Source="{Binding bitmap_image}" /> 
        </Border> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
     </GridView> 
    </controls:WrapPanel> 
</Grid> 

結果：あなたは本当にGridViewの最後のアイテムの後側でボタン側を入れたい場合は

。唯一のオプションはDataTemplateSelectorです。

Answer 2

最善の解決策はCommandBarを使用するのが良いかもしれない...私は追加ボタンを表示するための「偽」オブジェクトを作成するために必要と入れるでしょう」パネルの一番下にUWPのデザインガイドラインと一貫性のある「追加」ボタンを追加します。 GridViewにはFooterTemplateもあります。GridViewのフッターにいくつかのXAMLを追加することができます（アイテムの直後ではありません）。

まだアイテムをGridViewのコンテンツの一部として追加する場合は、実際には偽のアイテムとDataTemplateSelectorを使用する必要があります。このソリューションはあまりクリーンではありませんが、おそらく唯一の簡単な方法です。