Làm cách nào tôi có thể tạo ra một cái gì đó như thế này? (Gạch bên trong ứng dụng) Windows phone

Question

Tôi xin lỗi nếu tiêu đề câu hỏi wasnt rõ ràng, nhưng tôi đang cố gắng để làm một cái gì đó như thế này, Tôi không biết nếu họ là gạch hoặc hình ảnh bên trong một WrapControl:

Tôi đã nghĩ đến việc làm điều đó với một bảng điều khiển bọc và mỗi một trong những khối đó là một chồng xếp chồng. nhưng tôi không chắc đó có phải là cách tiếp cận đúng hay không.

có kiểm soát để thực hiện việc đó không?

Answer 1

Bạn đang đi đúng hướng. WrapPanel là con đường để đi :)

Để làm cho mỗi khối thú vị hơn, bạn có thể xem qua điều khiển HubTile từ windows phone toolkit mới nhất. Dù điều khiển/bảng bạn đang sử dụng, chỉ cần nhớ kích thước nên là 173 * 173.

Dùng ListBox

Trong một trong những dự án của tôi, tôi đã tạo ra một ListBox mà làm tất cả này. Lý do tôi sử dụng một số ListBox là vì ListBox có một mức thích hợp SelectedItem cho tôi biết người dùng đã khai thác ngói nào. Ngoài ra một lý do khác là ListBoxItems có thể nhận được hiệu ứng nghiêng đẹp.

Baiscally bạn chỉ cần tạo ra một phong cách ListBoxItem ngói-thích và áp dụng nó vào các ListBox 's ItemContainerStyle, bạn cũng cần phải đặt ListBox' s ItemsPanel là một WrapPanel.

Làm thế nào nó trông

Các ListBoxItem Phong cách

<Style x:Key="TileListBoxItemStyle" TargetType="ListBoxItem"> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/> 
    <Setter Property="VerticalContentAlignment" Value="Stretch"/> 
    <Setter Property="Padding" Value="0"/> 
    <Setter Property="FontSize" Value="64"/> 
    <Setter Property="Margin" Value="12,12,0,0"/> 
    <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/> 
    <Setter Property="Foreground" Value="White"/> 
    <Setter Property="Width" Value="173"/> 
    <Setter Property="Height" Value="173"/> 
    <Setter Property="HorizontalAlignment" Value="Left"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ListBoxItem"> 
       <Grid> 
        <Rectangle Fill="{TemplateBinding Background}"/> 
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Các ListBox

 <!-- set its ItemContainerStyle which is the style for each ListBoxItem --> 
     <ListBox ItemContainerStyle="{StaticResource TileListBoxItemStyle}"> 
      <!-- set its ItemsPanel to be a WrapPanel --> 
       <ListBox.ItemsPanel> 
       <ItemsPanelTemplate> 
        <toolkit:WrapPanel /> 
       </ItemsPanelTemplate> 
      </ListBox.ItemsPanel> 
      <ListBoxItem> 
       <Grid> 
        <TextBlock Text="Messages" /> 
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> 
         <Path Data="M1.4901163E-05,9.8579922 L50.000015,46.316994 L100.00002,9.8579922 L100.00002,62.499992 L1.4901163E-05,62.499992 z M0,0 L100,0 L50,36.458 z" Fill="White" Height="38.125" Stretch="Fill" UseLayoutRounding="False" Width="61" d:IsLocked="True" /> 
         <TextBlock Text="12" Margin="4,0,0,8" /> 
        </StackPanel> 
       </Grid> 
      </ListBoxItem> 
      <ListBoxItem/> 
      <ListBoxItem/> 
      <ListBoxItem/> 
      <toolkit:HubTile Title="Me ☺" Message="..." Notification="new messages!" Source="xxx.jpg" Margin="12,12,0,0" /> 
     </ListBox> 

Bạn có thể thấy mục cuối cùng thực sự là HubTile.

Hy vọng sẽ giúp bạn! :)