Individual ItemSize for LoopingSelectorItem

Question

I am trying to use LoopingSelector from Windows phone toolkit. The selector itself works fine but I'm having problems with the ItemSize on the individual items.

I dont have a single item that is the same size as the other so I would like to get every single item to only take the necessary space on the screen.

But I have been unable to get this behavior. Anyone have any feedback? I have attached the code in the bottom. I must miss something obvious here.

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

philorube · Answer 1 · 2014-01-24T14:49:45.710

I see that several VerticalAlignment values are set to "stretch". This will stretch the element vertically until it fills its parent. Try setting the Height property of those elements to "auto". The VerticalAlignment values should be either removed or set to anything but "stretch". Same goes for Width and HorizontalAlignment.

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

Realized today that I made a mistake in my response. The Height values should be set to "auto" and the VerticalAlignment values should be set to anything but "stretch" (or removed). — philorube, Jan 24 '14 at 14:51
Unfortionaly it does not work. Since you put an item size on the LoopingSelector all the items get that size :( — Mikael Johansson, Jan 25 '14 at 22:40

Individual ItemSize for LoopingSelectorItem

1 Answers1