Индивидуальный размер элемента для LoopingSelectorItem

Question

Я пытаюсь использовать LoopingSelector из набора инструментов Windows Phone. Сам селектор работает нормально, но у меня проблемы с ItemSize для отдельных элементов.

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

Но я не смог получить такое поведение. У кого-нибудь есть отзывы? Я приложил код внизу. Я должен пропустить что-то очевидное здесь.

<Style TargetType="toolkitPrimitives:LoopingSelectorItem">
        <Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>
        <Setter Property="Padding" Value="6"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Border x:Name="root" CacheMode="BitmapCache" Background="Transparent" Padding="{TemplateBinding Padding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">

                                <VisualStateGroup.Transitions>
                                    <VisualTransition From="Normal" To="Expanded" GeneratedDuration="0:0:0.33" />
                                    <VisualTransition From="Expanded" To="Normal" GeneratedDuration="0:0:0.33" />
                                </VisualStateGroup.Transitions>

                                <VisualState x:Name="Normal" />

                                <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="0.8" Duration="0"/>
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="Text" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                        <DoubleAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="BorderBrush" Duration="0">
                                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="DarkGray" />
                                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="Foreground" Duration="0">
                                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="White" />
                                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                                        </ObjectAnimationUsingKeyFrames>

                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentControl" Storyboard.TargetProperty="FontWeight" Duration="0">
                                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Bold" />
                                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Border.RenderTransform>
                            <TranslateTransform x:Name="Transform"/>
                        </Border.RenderTransform>

                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Rectangle x:Name="background" Margin="0" Opacity="0" Fill="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache"/>

                            <Border x:Name="border" Opacity="0" BorderThickness="0" BorderBrush="{StaticResource PhoneSubtleBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                                <ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
                                    <TextBlock x:Name="Text" TextWrapping="Wrap" Opacity="0.7" Text="{Binding Text}" Foreground="{StaticResource PhoneForegroundBrush}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
                                </ContentControl>
                            </Border>
                        </Grid>

                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <toolkitPrimitives:LoopingSelector x:Name="LoopingSelector" ItemMargin="10" ItemSize="430,120"   HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

Answer 1

Я вижу, что несколько значений VerticalAlignment установлены на "растяжение". Это растянет элемент по вертикали, пока он не заполнит его родительский элемент. Попробуйте установить для свойства Высота этих элементов значение "Авто". Значения VerticalAlignment должны быть либо удалены, либо установлены на что угодно, кроме "растянуть". То же самое касается ширины и горизонтального выравнивания.

<Border.RenderTransform>
    <TranslateTransform x:Name="Transform"/>
</Border.RenderTransform>
<Grid HorizontalAlignment="Stretch" Height="auto">
    <Rectangle x:Name="background" Margin="0" Opacity="0" Fill="{StaticResource PhoneAccentBrush}" CacheMode="BitmapCache"/>
    <Border x:Name="border" Opacity="0" BorderThickness="0" BorderBrush="{StaticResource PhoneSubtleBrush}" Height="auto" HorizontalAlignment="Stretch">
        <ContentControl x:Name="contentControl" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Height="auto" VerticalContentAlignment="Stretch">
            <TextBlock x:Name="Text" TextWrapping="Wrap" Opacity="0.7" Text="{Binding Text}" Foreground="{StaticResource PhoneForegroundBrush}" Height="auto" HorizontalAlignment="Stretch" />
        </ContentControl>
    </Border>
</Grid>