windows-phone-7silverlight-4.0tilestoolkit

How can I make something like this? (Tiles inside the app) Windows phone


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:

enter image description here enter image description here

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?


Solution

  • You are on the right track. WrapPanel is the way to go :)

    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.

    Use a ListBox

    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.

    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.

    How it looks

    enter image description here

    The ListBoxItem Style

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

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

    You can see the last item is actually a HubTile.

    Hope ths helps! :)