¿Cómo puedo hacer algo como esto? (Azulejos) dentro de la aplicación de teléfono de Windows

Question

Lo siento si la tampoco título de la pregunta clara, pero estoy tratando de hacer algo así, no sé si son las baldosas o imágenes dentro de un WrapControl:

Estaba pensando en hacer tal cosa con un panel envolvente y cada uno de esos bloques como un panel de distribución. pero no estoy seguro de si ese es el enfoque correcto.

¿Hay algún control para hacer tal cosa?

Answer 1

Estás en el camino correcto. WrapPanel es el camino a seguir :)

Para hacer que cada bloque sea más interesante, puede echar un vistazo al control HubTile del último windows phone toolkit. Cualesquiera que sean los controles/paneles que esté utilizando, recuerde que el tamaño debe ser 173 * 173.

Utilice un cuadro de lista

En uno de mis proyectos de I creó una ListBox que hace todo esto. La razón por la que uso un ListBox es porque ListBox tiene una propiedad SelectedItem que me dice qué mosaico ha sido aprovechado por el usuario. También otra razón es ListBoxItems puede recibir el efecto de inclinación agradable.

baiscally sólo tiene que crear un estilo de forma de baldosa ListBoxItem y aplicarlo a la ListBox 's ItemContainerStyle, también es necesario configurar el ListBox' s ItemsPanel a ser un WrapPanel.

¿Cómo se ve

El ListBoxItem Estilo

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

El cuadro de lista

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

Puede ver que el último artículo es en realidad un HubTile.

Hope ths helps! :)