WPF自定義控件的並排佈局

Question

我想創建一個自定義的控制，這樣我可以做這樣的事情：

<SideBySide> 
    <StackPanel SideBySide.Left="True">...</StackPanel> 
    <StackPanel SideBySide.Right="False">...</StackPanel> 
</SideBySide> 

我將使用這遍的地方，顯然更選項（大小等）。

我已經考慮過使用Panel子類，但這看起來不正確（在左邊和右邊有一個選定項的概念）。

所以，我想使用ItemsControl的子類 - 現在，有沒有人知道如何把項目放在控制模板的ItemsControl？

這是SideBySide縮寫的模板：

<ResourceDictionary 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:WpfCustomControlLibrary1"> 
    <Style TargetType="{x:Type local:SideBySideControl}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type local:SideBySideControl}"> 
        <Border Background="{TemplateBinding Background}" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}"> 
         <Grid> 
          <Grid.Resources> 
           <Style TargetType="{x:Type Rectangle}"> 
            <Setter Property="Margin" 
              Value="5" /> 
           </Style> 
          </Grid.Resources> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition /> 
           <ColumnDefinition Width="Auto" /> 
           <ColumnDefinition /> 
          </Grid.ColumnDefinitions> 
          <Grid Grid.Column="0" 
            VerticalAlignment="Stretch"> 
           <!-- PART_LeftContent goes here --> 
          </Grid> 
          <GridSplitter Width="3" 
              Grid.Column="1" 
              HorizontalAlignment="Center" 
              VerticalAlignment="Stretch" 
              ShowsPreview="False"> 
          </GridSplitter> 
          <Grid Grid.Column="2"> 
           <!-- PART_RightContent goes here --> 
          </Grid> 
         </Grid> 
        </Border> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</ResourceDictionary> 

Answer 1

直接的答案是，你需要一個ItemsPresenter在ControlTemplate，這將是這個樣子：

<ItemsControl x:Class="ItemsControlExample" 
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

    <ItemsControl.Template> 
     <ControlTemplate TargetType="ItemsControl"> 
      <Border SnapsToDevicePixels="True"> 
       <!-- Collection items are displayed by the ItemsPresenter. --> 
       <ItemsPresenter SnapsToDevicePixels="True" /> 
      </Border> 
     </ControlTemplate> 
    </ItemsControl.Template> 

    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <!-- Replace the default vertical StackPanel with horizontal. --> 
      <StackPanel Orientation="Horizontal" /> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 

    <ItemsControl.ItemContainerStyle> 
     <Style TargetType="..."> 
      <!-- The same container style applies to all items so where do you put the splitter? --> 
     </Style> 
    </ItemsControl.ItemContainerStyle>  

</ItemsControl> 

但應現在很明顯ItemsControl不符合你的用例。但是，您可以使用實現它作爲一個Control的ControlTemplate你已經有一個ContentControl的PART_LeftContent和PART_RightContent網格單元：

<!-- LeftSideContent is a DependencyProperty of type object --> 
<ContentControl x:Name="LeftContentControl" Content="{TemplateBinding LeftSideContent}" /> 

然後擴大你的代碼來處理ContentControl鼠標事件，以選擇並添加樣式觸發器爲選定的外觀，但這是非常簡單的東西。如果您尚未實施無視控件，則應注意不能在模板中定義事件回調，而必須將其掛接到代碼中：

public override void OnApplyTemplate() 
{ 
    base.OnApplyTemplate(); 

    ContentControl lc = (ContentControl)base.GetTemplateChild("LeftContentControl")); 
    // check for null in case the active template doesn't have a 'LeftContentControl' element 
    if (lc != null) 
    { 
     // Use these events to set SelectedItem DependencyProperty and trigger selected item 
     // highlight style. Don't forget to capture the mouse for proper click behavior. 
     lc.MouseDown += new MouseButtonEventHandler(LeftSide_MouseDown); 
     lc.MouseUp += new MouseButtonEventHandler(LeftSide_MouseUp); 
    } 
}