一种特殊的手风琴式控制

Question

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

我尝试用WPF实现类似的东西(但更基本)。不是那些飞来飞去的文字，只有基本的导航理念。我试着用一些扩展器控件和堆栈面板来构建它。我想到的是:

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

所以，这是有效的，至少在某种程度上。

来自我当前项目的两个截图来解释问题:由于声望积分，无法发布图片。

所有项目在一起应该使用stackpanel的完整宽度，而不是像图片中那样。由于声望积分，无法发布图片。

所有项都应使用完整宽度，但一个展开项的宽度应大于其他项。如图所示，但折叠式项目应使用剩余空间，每个项目以相同的数量填充空白)

任何帮助将是伟大的，我希望有可能理解我的目标/问题

Answer 1

我认为你想要使用的是一个UniformGridPanel或WrapPanel，它将使用全部可用的宽度，而不是一个StackPanel，这是使用最小的宽度可能。面板概述在这里

Answer 2

您可能希望使用Grid，如果项已展开，则将列/行的Height/Width设置为*，否则使用Auto。

另外，如果你在ItemsControl中使用Grid，你需要在ContentPresenter上设置Grid.Row/Grid.Column和Width/Height属性，而不是ItemTemplate，因为ItemsControl中的ItemTemplate总是包裹在ContentPresenter中。