SplitViewController в WPF

Question

Мне очень понравился SplitViewController в flex и его часто можно увидеть на ipad - интересно, как реализовать такой элемент управления в WPF?

Answer 1

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

Также доступен разделенный элемент управления.

Answer 2

Извините, если мне неясно, но мне нужна помощь с фактическим стилем:

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

Answer 3

Если вам нужен динамически заполненный элемент управления, вы можете использовать элемент управления списком, в котором шаблон элемента включает строку, например:

<ListView ItemsSource="{Binding Path=Contacts}" 
                ItemContainerStyle="{StaticResource ContactsListItemContainerStyle}"
                Template="{StaticResource ListViewTemplate}">
    <ListView.View>
        <GridView>
            <GridViewColumn Width="350">
                <GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <Line Width="100" Visibility="{Binding Converter={StaticResource lineVisibilityConverter}}"/>
                            <Label Content="{Binding Path=Label}"/>
                        </StackPanel>
                    </DataTemplate>
                </GridViewColumn.CellTemplate>
            </GridViewColumn>
        </GridView>
    </ListView.View>
</ListView>