我怎么能做这样的事情？ （应用程序内的Tiles）Windows手机

Question

如果问题标题不清楚，我很抱歉，但是我想尝试制作这样的东西，如果它们是WrapControl中的图块或图像，我不知道：

我正在考虑使用包装面板制作这样的东西，并将每个块作为堆叠面板。但我不确定这是不是正确的做法。

是否有控件可以做这样的事情？

Answer 1

你走在正确的轨道上。 WrapPanel是要走的路：）

为了让每个块更有趣，您可以查看最新HubTile中的windows phone toolkit控件。无论您使用哪种控件/面板，只需记住尺寸应为173 * 173。

使用ListBox

在我的一个项目中，我创建了一个ListBox来完成所有这些工作。我使用ListBox的原因是因为ListBox有一个SelectedItem符号，它告诉我用户点击了哪个图块。另一个原因是ListBoxItems可以获得良好的倾斜效果。

通过Baiscally，您只需创建类似于瓷砖的ListBoxItem样式并将其应用于ListBox的{​​{1}}，您还需要设置ItemContainerStyle ListBox为ItemsPanel。

外观如何

ListBoxItem样式

WrapPanel

列表框

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

您可以看到最后一项实际上是 <!-- 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> 。

希望有帮助！ ：）