Как я могу сделать что-то подобное?(Плитка внутри приложения) Windows phone - PullRequest
Новая
       38

Как я могу сделать что-то подобное?(Плитка внутри приложения) Windows phone

18 голосов
/ 04 декабря 2011

Извините, если заголовок вопроса не ясен, но я пытаюсь сделать что-то вроде этого, я не знаю, являются ли они плитками или изображениями внутри WrapControl:

enter image description here enter image description here

Я думал о создании такой вещи с оберточной панелью и каждым из этих блоков в качестве стековой панели. но я не уверен, что это правильный подход.

есть ли контроль, чтобы сделать такую ​​вещь?

1 Ответ

44 голосов
/ 04 декабря 2011

Вы на правильном пути. WrapPanel это путь:)

Чтобы сделать каждый блок более интересным, вы можете взглянуть на HubTile из новейшего набора инструментов для Windows Phone . Какие бы элементы управления / панели вы не использовали, просто помните, что размер должен быть 173 * 173.

Использовать ListBox

В одном из моих проектов я создал ListBox, который делает все это. Причина, по которой я использую ListBox, заключается в том, что ListBox имеет свойство SelectedItem, которое сообщает мне, какая плитка нажата пользователем. Еще одна причина - ListBoxItems может получить хороший эффект наклона.

В принципе, вам просто нужно создать стиль ListBoxItem, похожий на плитку, и применить его к ListBox ItemContainerStyle, также вам нужно установить ListBox ItemsPanel как WrapPanel.

Как это выглядит

enter image description here

Стиль 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>

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>

Вы можете видеть, что последний элемент на самом деле HubTile.

Надеюсь, это поможет! :)

...