Question

I really liked the SplitViewController in flex and commonly seen on the ipad – wondering how one would implement such a control in WPF?

Answer 1

Sorry if I wasn’t clear but I needed help with the actual styling:

    <SolidColorBrush x:Key="SolidTea" Color="#FF81857A" />

<SolidColorBrush x:Key="WhiteSolid" Color="White" />

<Style BasedOn="{StaticResource {x:Type ListBox}}"
   TargetType="ListBox"
   x:Key="PinnedList">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                <LinearGradientBrush.GradientStops>
                    <GradientStop Offset="0.0" Color="#90DDDD" />
                    <GradientStop Offset="1.0" Color="#5BFFFF" />
                </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBox}">
                <Grid>
                    <Rectangle Height="20" Width="20" Fill="{StaticResource SolidTea}" Margin="0,-10,0,-20" VerticalAlignment="Top" x:Name="ui_recPinnedSPOs" HorizontalAlignment="Left">
                        <Rectangle.LayoutTransform>
                            <RotateTransform Angle="-45"/>
                        </Rectangle.LayoutTransform>
                    </Rectangle>
                    <Border Name="Border" Background="{StaticResource WhiteSolid}" BorderBrush="{StaticResource SolidTea}" BorderThickness="4" CornerRadius="2">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <ScrollViewer Grid.Row="1" Focusable="false" Padding="{TemplateBinding Padding}">
                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            </ScrollViewer>
                        </Grid>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style TargetType="ListBoxItem" x:Key="PinnedListBoxItem">
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FF9CC164"/>
        <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#FF9CC164"/>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
    </Style.Resources>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
    </Style.Triggers>
</Style>