我怎么能做出这样的东西?(应用程序内的瓷砖)Windows 手机 [英] How can I make something like this? (Tiles inside the app) Windows phone
问题描述
如果问题标题不清楚,我很抱歉,但我正在尝试做这样的事情.我不知道它们是 WrapControl 中的图块还是图像:
I'm sorry if the question title wasnt clear, but I'm trying to make something like this. I don't know if they are tiles or images inside a WrapControl:
我想用一个包裹面板制作这样的东西,每个块都作为一个堆叠面板.但我不确定这是否是正确的方法.
I was thinking of making such thing with a wrap panel and each one of those blocks as a stackpanel. but I'm not sure if thats the right approach.
有没有控件可以做这样的事情?
is there a control to do such thing?
推荐答案
您走对了.WrapPanel
是要走的路:)
You are on the right track. WrapPanel
is the way to go :)
为了让每个区块更有趣,您可以查看 HubTile 控件来自最新的 windows phone 工具包.无论您使用什么控件/面板,请记住尺寸应为 173*173.
To make each block more interesting, you can take a look at the HubTile control from the latest windows phone toolkit. Whatever controls/panels you are using, just remember the size should be 173*173.
使用列表框
在我的一个项目中,我创建了一个 ListBox
来完成所有这些工作.我使用 ListBox
的原因是因为 ListBox
有一个 SelectedItem
属性,它告诉我用户点击了哪个图块.另一个原因是 ListBoxItems
可以收到很好的倾斜效果.
In one of my projects I created a ListBox
that does all this. The reason that I use a ListBox
is because ListBox
has a SelectedItem
propery which tells me which tile is tapped by the user. Also another reason is ListBoxItems
can receive the nice tilt effect.
基本上,您只需要创建一个类似 tile 的 ListBoxItem
样式并将其应用到 ListBox
的 ItemContainerStyle
,您还需要将 ListBox
的 ItemsPanel
设置为 WrapPanel
.
Baiscally you just need to create a tile-like ListBoxItem
style and apply it to the ListBox
's ItemContainerStyle
, also you need to set the ListBox
's ItemsPanel
to be a WrapPanel
.
外观
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>
列表框
<!-- 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>
你可以看到最后一项实际上是一个HubTile
.
You can see the last item is actually a HubTile
.
希望有帮助!:)
这篇关于我怎么能做出这样的东西?(应用程序内的瓷砖)Windows 手机的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!