Question

我在这里放了一个示例链接： http://activeden.net/item/xml-horizontal-vertical-accordion-banner-rotator/full_screen_preview/127714?ref=premiumtemplates

我尝试用WPF实现类似（但更基本）的东西。不是飞行文字的东西，只有基本的导航理念。我尝试用一些扩展器控件和一个stackpanel构建它。我想出的是：

<ItemsControl Grid.Row="1" IsTabStop="False" ItemsSource="{Binding Path=tabs,Mode=OneWay}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ContentPresenter  Content="{Binding}" />                    
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Vertical" />               
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>

我使用MVVM，因此还有一个应用的模板：

   <DataTemplate DataType="{x:Type vm:TabulatorViewModel}">
    <Expander  HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ExpandDirection="{Binding .direction,Mode=OneWay}" IsExpanded="{Binding .isExpanded,Mode=TwoWay}"  Header="{Binding .header,Mode=OneWay}" >
        <Expander.Style>
              <Style TargetType="{x:Type Control}">

                <Setter Property="Template" Value="{StaticResource HorizontalExpanderRight}" />

                <Style.Triggers>

                    <DataTrigger Binding="{Binding .direction}" Value="Left">

                        <Setter Property="Template" Value="{StaticResource HorizontalExpanderLeft}" />

                    </DataTrigger>

                </Style.Triggers>

            </Style>
        </Expander.Style>

        <StackPanel>
            <Label Content="{Binding .seitenInhalt.Header,Mode=OneWay}"></Label>

        <TextBox Text="{Binding .seitenInhalt.Inhalt,Mode=OneWay}"></TextBox>
            <Button Content="zurück" Command="{Binding .seitenInhalt.MovePreviousCommand}" />
            <Button Content="vor" Command="{Binding .seitenInhalt.MoveNextCommand}"/>                 

        </StackPanel>
    </Expander>

</DataTemplate>

所以，这是有效的，至少是一种。

我当前项目的两个截图来解释这些问题：由于声誉点，无法发布图片。

所有项目应该使用堆栈面板的完整宽度，而不是像图片中那样。由于声誉点，无法发布图片。

所有项目都应使用完整的宽度，但是一个展开的项目应该具有比其余项目更大的宽度。如图所示，但是折叠的项目应该使用剩余的空间，每个空间填充相同的数量）

任何帮助都会很棒，我希望能够理解我的目标/问题。

Answer 1

我认为你想要使用的是UniformGridPanel或WrapPanel，它将使用可用的全宽，而不是使用尽可能最小宽度的StackPanel。面板概述为here。

Answer 2

如果项目为Expanded，则您可能希望使用Grid Height / Width列/行设置为*，或{{ 1}}如果没有。

此外，如果您在ItemsControl中使用网格，则需要在{{Auto / Grid.Row和Grid.Column / Width属性上设置1}}，而不是Height，因为ItemsControl中的ItemTemplate始终包含在ContentPresenter中。

一种特殊的手风琴，如控制

2 个答案: