以編程方式將畫布面板添加到C＃UWP頁面

Question

我正在用C＃在VS 2017中創建一個UWP頁面，我想從數據庫中爲每個用戶（不超過20個）重複以下Canvas代碼以創建一個用戶瓷磚系列：

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

它看起來很好，但我需要能夠創建此頁面初始化時。在Bootstrap術語中，我們正在談論帶有浮動的卡片，但是UWP我不知道。

Answer 1

這是我目前正在研究的項目中的一段代碼。它使用UWP社區工具包中的Bladeview Control和WrapPanel Panel（如果您還沒有它，請使用nuget將其添加到您的項目中）以創建我相信您將使用動態生成的畫布的效果。

如果您還沒有，我還建議從Windows應用商店下載「UWP示例應用程序」。它演示了社區工具包可用的控件併爲它們提供了代碼。它還提供代碼和文檔，以提供您可能需要的許多有用功能。

該示例應用程序還將爲您演示我正在討論的bladeview控件。

<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在必要時顯示一個新的BladeItems行。