windows phone 7 - page - ¿Cómo puedo hacer algo como esto?(Azulejos dentro de la aplicación) Windows Phone

silverlight opera

Question

Lo siento si el título de la pregunta no estaba claro, pero estoy tratando de hacer algo como esto, no sé si son mosaicos 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 apilamiento. pero no estoy seguro si ese es el enfoque correcto.

¿Hay un 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 conjunto de herramientas de Windows Phone . Independientemente de los controles / paneles que esté utilizando, recuerde que el tamaño debe ser 173 * 173.

Use un cuadro de lista

En uno de mis proyectos creé un 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 tocado el usuario. También otra razón es que ListBoxItems puede recibir el efecto de inclinación agradable.

Básicamente, solo necesita crear un estilo ListBoxItem similar a un azulejo y aplicarlo al ItemContainerStyle del ListBox , también debe configurar el ItemsPanel de ItemsPanel del ListBox para que sea un WrapPanel .

Cómo se ve

El estilo ListBoxItem

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

Puedes ver que el último elemento es en realidad un HubTile .

Espero que esto ayude! :)