Come posso fare qualcosa del genere? (piastrelle all'interno della app) Windows Phone

Question

Mi dispiace se il titolo della domanda non era chiara, ma io sto cercando di fare qualcosa di simile, non so se sono piastrelle o immagini all'interno di una WrapControl:

Stavo pensando di realizzare una cosa del genere con un pannello a capo e ognuno di quei blocchi come un pannello di supporto. ma non sono sicuro se questo sia l'approccio giusto.

c'è un controllo per fare una cosa del genere?

Answer 1

Sei sulla strada giusta. WrapPanel è la strada da percorrere :)

Per rendere ogni blocco più interessante, è possibile dare un'occhiata al controllo HubTile dall'ultimo windows phone toolkit. Qualunque controlli/pannelli stai usando, ricorda che la dimensione dovrebbe essere 173 * 173.

Utilizzare un ListBox

In uno dei miei progetti ho creato un ListBox che fa tutto questo. La ragione per cui io uso un ListBox è perché ListBox ha una proprietà SelectedItem che mi dice quale tessera viene toccata dall'utente. Anche un altro motivo è ListBoxItems in grado di ricevere il bel effetto di inclinazione.

Baiscally si solo bisogno di creare un ListBoxItem stile tegola-like e applicarlo al ListBox 's ItemContainerStyle, anche è necessario impostare il ListBox' s ItemsPanel essere un WrapPanel.

Come appare

Il ListBoxItem Stile

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

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

È possibile visualizzare l'ultimo elemento in realtà è un HubTile.

Spero che questo aiuti! :)