C＃UWPページにキャンバスパネルを追加する

Question

VS 2017でC＃を使用してUWPページを作成していますが、データベースからすべてのユーザー（20個以下）に対して次のキャンバスコードを繰り返し実行して、

<Canvas Grid.Column="1" Margin="34,73,1532,625" Grid.Row="1" > 
     <Rectangle Canvas.Left="10" Canvas.Top="10" Fill="#3458a5" Width="280" Height="110" VerticalAlignment="Center" /> 
     <TextBlock Canvas.Left="30" TextWrapping="Wrap" Text="Jill Brown" FontWeight="SemiBold" Canvas.Top="20" Foreground="white" FontSize="26"/> 
     <TextBlock Canvas.Left="30" TextWrapping="Wrap" Text="Senior Lounge Host" Canvas.Top="60" Foreground="white" FontSize="16"/> 
     <Button Content="Log in" Tag="1" Canvas.Left="200" Canvas.Top="78" HorizontalAlignment="Right" Background="#CC4A7BE5" Foreground="White" Width="78" Click="buttonLogInClick"/> 
    </Canvas> 

これはうまく見えますが、ページを初期化するときにこれを作成できる必要があります。ブートストラップ条件では、フロートは残っていますがUWPのカードは話しています。わかりません。

Answer 1

私が現在取り組んでいるプロジェクトのコードスニペットです。 UWP Community ToolkitのBladeview ControlとWrapPanel Panelを使用しています（まだ持っていない場合は、プロジェクトに追加してください）。動的に生成されたキャンバスで効果が得られると思います。

Windowsストアから「UWPサンプルアプリケーション」をダウンロードすることをお勧めします。コミュニティツールキットで利用可能なコントロールを示し、それらのコードを提供します。また、あなたのアプリに役立つ多くの便利な機能のコードとドキュメントを提供しています。

サンプルアプリケーションでは、私が話しているブレードビューコントロールのデモを提供します。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <ScrollViewer Height="764" Width="776" HorizontalScrollMode="Disabled" VerticalScrollMode="Enabled" HorizontalScrollBarVisibility="Disabled"> 
     <controls:BladeView x:Name="UserBladeView" BladeMode="Normal" ItemsSource="{x:Bind UserDataBase}" Height="auto" Width="767" > <!-- ItemSource Should be the Observable Collection containing your user objects --> 
     <controls:BladeView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <wrapPanel:WrapPanel Orientation="Horizontal" Height="auto" Width="765" Margin="5"/> 
      </ItemsPanelTemplate> 
     </controls:BladeView.ItemsPanel> 
     <controls:BladeView.ItemTemplate> 

     <DataTemplate x:DataType="models:Product"> <!-- This should correspond to the namespace the class that represents your users resides in xmlns:local="using:yournamespace"--> 
      <controls:BladeItem x:Name="UserTiles" 
           IsOpen="True" 
           TitleBarVisibility="Collapsed" Width="365" Height="575" Visibility="Visible" Background="#FF1D1919" BorderBrush="#FF5D5D5D" BorderThickness="2" Margin="5"> 
       <StackPanel HorizontalAlignment="Left" Height="auto" VerticalAlignment="Top" Width="371" Margin="0,0,-10,-4" > 
        <TextBlock Margin="2,2,0,2" HorizontalAlignment="Left" TextWrapping="Wrap" x:Name="UserFirstName" Text="{Binding FirstName}" VerticalAlignment="Top" Height="auto" Width="308" FontSize="36" Foreground="#FFCDCDCD"/> 
        <TextBlock Margin="2" HorizontalAlignment="Left" TextWrapping="Wrap" x:Name="UserLastName" Text="{Binding LastName}" VerticalAlignment="Top" Height="50" Width="316" FontSize="18" Foreground="#FFCDCDCD" Visibility="Visible"/> 
        <TextBlock Margin="2" HorizontalAlignment="Left" TextWrapping="Wrap" x:Name="UserTitle" Text="{Binding Title}" VerticalAlignment="Top" Height="50" Width="316" FontSize="18" Foreground="#FFCDCDCD" Visibility="Visible"/> 
        <Image Margin="5" x:Name="UserImage" Source="{Binding UserHeadShot}" Height="100" Width="auto" /> 
       </StackPanel> 
      </controls:BladeItem> 
     </DataTemplate> 
     </controls:BladeView.ItemTemplate> 
     </controls:BladeView> 
    </ScrollViewer> 
</Grid> 

BladeViewコントロール内のItemSourceは、ユーザーオブジェクトを保持するのObservableCollectionであるべきとBladeItem内のあなたのバインディングを表示したいプロパティを表している必要があります。

これは、コレクション内のオブジェクトごとに、クラス内のすべてのバインドされたプロパティを含むBladeItemを作成することです。 WrapPanelは、必要に応じてBladeViewerがBladeItemの新しい行を表示するようにします。