своего рода специальный аккордеон, как контроль - PullRequest
Новая
       36

своего рода специальный аккордеон, как контроль

0 голосов
/ 01 августа 2011

Я поместил пример ссылки здесь: 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>

Итак, это работает, по крайней мере, вроде.

два скриншота из моего текущего проекта, чтобы объяснить проблемы: Не удалось опубликовать изображение из-за очков репутации.

Все элементы вместе должны использовать полную ширину стековой панели, а не как на рисунке. Не удалось опубликовать изображение из-за очков репутации.

Все элементы должны использовать полную ширину, но один расширенный элемент должен иметь большую ширину, чем остальные. Как на картинке, но свернутые элементы должны использовать оставшееся пространство, каждое на одинаковое количество, заполняющее пробел)

Любая помощь была бы великолепна, я надеюсь, что возможно понять мою цель / проблемы.

Ответы [ 2 ]

0 голосов
/ 01 августа 2011

Возможно, вы захотите использовать Grid с Height / Width для столбцов / строк, установленным на *, если элемент расширен, или Auto, если нет.

Кроме того, если вы используете Grid в ItemsControl, вам нужно установить свойства Grid.Row / Grid.Column и Width / Height для ContentPresenter, а не ItemTemplate, так как ItemTemplate в ItemsControl всегда заключен в ContentPresenter.

0 голосов
/ 01 августа 2011

Я думаю, что вы хотите использовать UniformGridPanel или WrapPanel, который будет использовать всю доступную ширину, а не StackPanel, который сделан для использования минимально возможной ширины. Обзор панели: здесь .

...