Design ListPicker Blend/Xaml

Question

I am using a ListPicker, but have a hard time getting the design to work. I have included the test I have done:

 <ControlTemplate x:Key="listpicker_style" TargetType="toolkit:ListPicker">
        <StackPanel>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="PickerStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="Highlighted">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="UserControl"
                                Storyboard.TargetProperty="Foreground"
                                Duration="0">
                                <DiscreteObjectKeyFrame
                                    Value="{StaticResource PhoneTextBoxForegroundBrush}"
                                    KeyTime="0"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="Border"
                                Storyboard.TargetProperty="Background"
                                Duration="0">
                                <DiscreteObjectKeyFrame
                                    Value="{StaticResource PhoneTextBoxEditBackgroundColor}"
                                    KeyTime="0"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="Border"
                                Storyboard.TargetProperty="BorderBrush"
                                Duration="0">
                                <DiscreteObjectKeyFrame
                                    Value="{StaticResource PhoneTextBoxEditBorderBrush}"
                                    KeyTime="0"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="Border"
                                Storyboard.TargetProperty="Background"
                                Duration="0">
                                <DiscreteObjectKeyFrame
                                    Value="{StaticResource TransparentBrush}"
                                    KeyTime="0"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="Border"
                                Storyboard.TargetProperty="BorderBrush"
                                Duration="0">
                                <DiscreteObjectKeyFrame
                                    Value="{StaticResource PhoneDisabledBrush}"
                                    KeyTime="0"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="UserControl"
                                Storyboard.TargetProperty="Foreground"
                                Duration="0">
                                <DiscreteObjectKeyFrame
                                    Value="{StaticResource PhoneDisabledBrush}"
                                    KeyTime="0"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ContentControl
                Content="{TemplateBinding Header}"
                ContentTemplate="{TemplateBinding HeaderTemplate}"
                Foreground="{StaticResource PhoneSubtleBrush}"
                FontSize="{StaticResource PhoneFontSizeNormal}"
                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                Margin="0 0 0 8"/>
            <Grid>
                <Rectangle Fill="#FFEAC726" HorizontalAlignment="Left" Height="52" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
                <Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,0,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
                <Rectangle Fill="#FF685B1F" HorizontalAlignment="Left" Height="9" Margin="0,43,-7,0" Stroke="Black" VerticalAlignment="Top" Width="83"/>
                <Border x:Name="Border"
                    Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
                    <UserControl x:Name="UserControl" Foreground="{TemplateBinding Foreground}" Margin="7,-3,-7,3">
                        <StackPanel>
                            <TextBlock x:Name="MultipleSelectionModeSummary" Margin="8 8 0 8" />
                            <Canvas x:Name="ItemsPresenterHost" MinHeight="46">
                                <ItemsPresenter x:Name="ItemsPresenter">
                                    <ItemsPresenter.RenderTransform>
                                        <TranslateTransform x:Name="ItemsPresenterTranslateTransform"/>
                                    </ItemsPresenter.RenderTransform>
                                </ItemsPresenter>
                            </Canvas>
                        </StackPanel>
                    </UserControl>
                </Border>
            </Grid>
        </StackPanel>
    </ControlTemplate>

Basicly what I want to achieve is to create a listpicker that looks like a scroll. When you click it the scroll expands and shows the entire options. Therefore I am not interested in using the full-screen look.

I have also done other tries with similar bad success where I used designed usercontrols as the scrolls top and bottom for animations. But the design of the listpicker has been impossible to do.

My question is therefore if somebody has a design of the listpicker, using usercontrols, such that I can override them or if you can direct me towards how to manipulate the listpicker correctly. I have used blend, experssion design, Illustrator and XAML, so any method for designing the listpicker using either of them would be much appreciated!

Visual Example

So the idea is something like this:

Such that the text is inside the scroll, when you click it, the scroll expands with a list inside you can scroll to choose elements.

UserControl

Usercontrol of a scroll

Pictured Overview

The selected Item:

Click the element and a list appears:

This is how a listpicker works I want to design it as a scroll, either all from scratch or using the tool listpicker description, is what I am looking for. I have however not succeeded in making the expanding look nice.

Answer 1

I have made it the most simple I can. The idea is the following: the Translate and Scale properties are animated between states, others like Height, etc aren't. So Let's create the Layout like the following:

 <StackPanel Width="500">
        <Grid x:Name="HeaderGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped"/>
        <Grid VerticalAlignment="Top" x:Name="ContentGrid" Height="400" Background="BlanchedAlmond" RenderTransformOrigin="0.5,0">
            <Grid.RenderTransform>
                <CompositeTransform/>
            </Grid.RenderTransform>
            <ScrollViewer>
                <ItemsControl>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" Tapped="TextBlock_Tapped"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.Items>
                        <x:String>One</x:String>
                        <x:String>Two</x:String>
                        <x:String>Three</x:String>
                    </ItemsControl.Items>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
        <Grid x:Name="BottomGrid" Height="100" Background="Red" Tapped="HeaderGrid_Tapped" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <CompositeTransform/>
            </Grid.RenderTransform>
        </Grid>
    </StackPanel>

Now let's add some visual states to the page, control or what you need

<VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.5"/>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Expanded"/>
            <VisualState x:Name="Collapsed">
                <Storyboard>
                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ContentGrid" d:IsOptimized="True"/>
                    <DoubleAnimation Duration="0" To="-400" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="BottomGrid" d:IsOptimized="True"/>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

And finally the codebehind for the change of states

private void HeaderGrid_Tapped(object sender, TappedRoutedEventArgs e)
    {
        CheckState();
    }
    private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
    {
        var value = (sender as FrameworkElement).DataContext;

        CheckState();
    }
    private void CheckState()
    {
        if ((ContentGrid.RenderTransform as CompositeTransform).ScaleY > 0)
            VisualStateManager.GoToState(this, "Collapsed", true);
        else
            VisualStateManager.GoToState(this, "Expanded", true);
    }

Now you can add fade on the text when appears and disappears, and change the colors for images, etc. But the idea is solved.