WPF中的SplitViewController

Question

我真的很喜歡Split中的SplitViewController，它通常在iPad上看到 - 想知道如何在WPF中實現這樣的控件？

Answer 1

對不起，如果我不清楚，但我需要與實際的造型幫助：

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

您可以使用一個StackPanel裏面將要左對齊列表控件，您選擇的項目的foreach，右側對齊部分

也顯示其文本中，存在分裂控制可用。

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>