Расположение WPF пользовательского элемента управления как выполнение

Я думаю, ваша форма разбита неправильно, ИМО.

Область 2 не должна включать нижнюю часть, которую вы описываете, которую вы хотите «встроить».

Это должен быть разделен (что касается макета) и, вероятно, помещаться в сетку с 2 столбцами и 2 строками вместе с областью 3 и областью 4. В этом случае область 3 должна иметь диапазон строк, равный 2.

XAML, в в этом случае, на самом деле было бы довольно чисто, если бы это было сделано таким образом.

Это может выглядеть примерно так:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
    </Grid.ColumnDefinitions>

    <uC:Area1 Grid.Row="0"><!-- Area Control here --></uC:Area1>
    <uC:Area2 Grid.Row="1"><!-- Area Control here --></uC:Area2>

    <Grid Grid.Row="2">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <uC:AreaDuree Grid.Row="0" Grid.Column="0">
            <!-- Area Control here -->
        </uC:AreaDuree>

        <uC:Area4 Grid.Row="1" Grid.Column="0">
            <!-- Area Control here -->
        </uC:Area4>

        <uC:Area3 Grid.RowSpan="2" Grid.Column="1">
            <!-- Area Control here -->
        </uC:Area3>                        

    </Grid>

</Grid>

Я предлагаю вам разделить ваш Control # 2 из 3 или 4 более конкретных UserControl. Затем загрузите # 2, # 3, # 4 внутри WrapPanel. Проверьте эту ссылку:

Для меня, чтобы упростить жизнь вашему дизайнеру, я бы предложил вам решение ContentControl.

Таким образом, ваш дизайнер мог бы легко добавить свои элементы управления, а для вас просто обязательно сделайте свой Usercontrol # 2 достаточно умным, чтобы правильно отображать макет.

Я думаю, что это простая сетка, "хитрость" в том, что совершенно нормально, если один элемент управления перекрывает другой - WPF будет всегда отображать их в одном и том же порядке:

Я использовал Height = "Auto" для всех строк сетки, в зависимости от того, как настроены пользовательские элементы управления, вам может потребоваться указать реальную высоту, чтобы они правильно выстроились в линию.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <uc:UserControl1 Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"/>
    <uc:UserControl2 Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
    <uc:UserControl3 Grid.Row="2" Grid.Column="1" Grid.RowSpan="2"/>
    <uc:UserControl4 Grid.Row="3" Grid.Column="0"/>
<Grid>

Это 1 большая сетка с 3 строками и 2 столбцами. Каждая зона этой сетки содержит сетку, способную принимать ваши пользовательские элементы управления. Таким образом, для сетки номер 3 просто нужно установить его верхнее поле на -75. Он будет перекрывать сетку номер 2, если поместить ее ниже в xaml. Затем вам просто нужно заблокировать столбцы и строки в зависимости от того, как вы хотите, чтобы они реагировали.

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.55*"/>
        <ColumnDefinition Width="0.45*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.363*"/>
        <RowDefinition Height="0.369*"/>
        <RowDefinition Height="0.268*"/>
    </Grid.RowDefinitions>
    <Grid Grid.ColumnSpan="2" Background="#FF48C5D0"/>
    <Grid Margin="1,0,0,0" Grid.ColumnSpan="2" Grid.Row="1" Background="#FFD2A268"/>
    <Grid Margin="1,0,0,0" Grid.Row="2" Background="#FFB7F075"/>
    <Grid Grid.Column="1" Grid.Row="2" Background="#FFB129EC" Margin="0,-75,0,0"/>
</Grid>

Мартин Ламонтань

Возможно, стоит подумать о том, чтобы # 3 и # 4 были частью пользовательского элемента управления # 2, тогда все упростит компоновку. Сетка верхнего уровня включает №1 и №2

См. Второй макет пользовательского элемента управления. И вся эта сетка с * размером, так что ее размер изменяется в соответствии с размером окна.

alt text http://img5.imageshack.us/img5/4419/40506576.jpg[1284 impression

I'm surprised nobody has yet suggested using an actual FlowDocument to lay out your UI.

I've used FlowDocument before to achieve complex arrangements. It works quite well except that some property inheritance is blocked (TextElement.FontSize, for example). This is not difficult to work around.

In your case, just break #2 into a separate UserControl per section, and inside your FlowDocument, use InlineUIContainer to wrap each section.

<Window>
  <DockPanel>
    ... toolbars, etc ...

    <FlowDocumentScrollViewer ...>
      <FlowDocument>
        ...
         <InlineUIContainer>
           <my:PartialNumberTwo DataContext="{Binding ...}" />
         </InlineUIContainer>
        ...

Of course there are limits to what FlowDocument can do, so it may not work for your scenario.

An extremely flexible option is to create a custom panel that lays out its children in a WrapPanel style, but does by fitting rectangles, and before it starts it marks out any area overlapped by the panel's own siblings as unavailable.

Such a panel would be used like this:

<Grid ...>
  ... RowDefinitions, ColumnDefinitions ...

  <panels:WrapIntoRemainingSpacePanel RowSpan="4" ColumnSpan="3"> <!-- fill whole grid -->
    <my:Control2Part1 />
    <my:Control2Part2 />
    <my:Control2Part3 />
    <my:Control2Part4 />
 </panels:WrapIntoRemainingSpacePanel>

 <my:Control1 Grid.Row="0" Grid.ColumnSpan="3" />
 <my:Control3 Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="2" />
 <my:Control4 Grid.Row="3" Grid.RowSpan="2" />

This panel would be implemented as follows:

1. In ArrangeOverride, schedule a Dispatcher.BeginInvoke callback to do the actual arranging and report full size used
2. In the callback, get rectangles representing all my siblings' bounding boxes in my parent's coordinate space.
3. Sort Y coordinates (top and bottom) of all rectangles placed
4. Place each child by finding the first Y coordinate in the sorted list at which there is horizontal space somewhere for the contents, and putting it as far left as possible
5. Monitor siblings' VisualTransform for changes, if any call InvalidateArrange()