Как заставить аккордеонный регион расширяться (вертикально) до динамического контента? - PullRequest
Новая
       16

Как заставить аккордеонный регион расширяться (вертикально) до динамического контента?

10 голосов
/ 10 сентября 2010

У меня есть основная сетка данных, а затем элемент управления аккордеоном.В одном из элементов аккордеона у меня есть другая сетка данных, которая привязывается к выбранному элементу первой сетки данных.Простой xaml: 

<sdk:DataGrid Name="dgMain" ItemsSource="{Binding SomeSource}" />
<toolkit:Accordion>
    <toolkit:AccordionItem Header="Details">
        <sdk:DataGrid ItemsSource="{Binding ElementName=dgMain, Path=SelectedItem.Children}"/>
    </toolkit:AccordionItem>
</toolkit:Accordion>

У меня есть свойство VerticalAlignment второй сетки, установленное на «Растянуть», поэтому оно растягивается, поскольку к нему привязаны разные размеры коллекции, но проблема в том, что оно растягивается только в пределах размера AccordionItem,если я выберу новый элемент в первой сетке, который имеет больше «Дочерних», тогда мне придется прокрутить вторую сетку, потому что AccordionItem не изменился.

Область AccordionItem изменится только тогда, когда я сгущу и снова разверну,Установка VerticalContentAlignment в значение «Растянуть» для элемента аккордеона не работает.Я думаю, потому что это срабатывает только при первом расширении.

Кто-нибудь знает, что еще я могу попробовать, или я что-то упускаю.Я бы предпочел придерживаться решения xaml, чтобы оставаться дружелюбным к MVVM, но рад слышать все.

Ответы [ 3 ]

6 голосов
/ 26 октября 2011

Причина, по которой AccordionItem не изменяется должным образом, заключается в том, что в одной из его управляющих частей есть ошибка - ExpandableContentControl. Проблема описана здесь .

Я думаю, что вы можете либо исправить его исходный код, либо, что проще, заменить этот элемент управления из стиля по умолчанию на обычный ContentControl. Я включил стиль с нормальным значением ContentControl и протестировал его в коде, предоставленном @JohnNicholas, и он работает. 

    <Style TargetType="toolkit:AccordionItem">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="#FFECECEC"/>
        <Setter Property="Background" Value="White"/>
        <Setter Property="Margin" Value="0"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalAlignment" Value="Stretch"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:AccordionItem">
                    <Grid Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="MouseOver"/>
                                <VisualState x:Name="Disabled"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ExpansionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Collapsed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="ExpandSite">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Expanded">
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="LockedStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Locked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="ExpanderButton">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="False"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unlocked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="IsEnabled" Storyboard.TargetName="ExpanderButton">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="True"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="ExpandDirectionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0"/>
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="ExpandDown">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd1">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ExpandUp">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpanderButton">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ExpandLeft">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpanderButton">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpandSite">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpanderButton">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpandSite">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ExpanderButton">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ExpandRight">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpanderButton">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.ColumnSpan)" Storyboard.TargetName="ExpandSite">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpanderButton">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.RowSpan)" Storyboard.TargetName="ExpandSite">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="2"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Row)" Storyboard.TargetName="ExpandSite">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="(Grid.Column)" Storyboard.TargetName="ExpandSite">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Height" Storyboard.TargetName="rd0">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Width" Storyboard.TargetName="cd1">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="*"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1,1,1,1" Padding="{TemplateBinding Padding}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition x:Name="cd0" Width="Auto"/>
                                    <ColumnDefinition x:Name="cd1" Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition x:Name="rd0" Height="Auto"/>
                                    <RowDefinition x:Name="rd1" Height="Auto"/>
                                </Grid.RowDefinitions>
                                <toolkit:AccordionButton x:Name="ExpanderButton" Background="{TemplateBinding Background}" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="True" IsChecked="{TemplateBinding IsSelected}" Margin="0,0,0,0" Padding="0,0,0,0" Grid.Row="0" Style="{TemplateBinding AccordionButtonStyle}" VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                <ContentControl x:Name="ExpandSite" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" FontWeight="{TemplateBinding FontWeight}" FontStyle="{TemplateBinding FontStyle}" FontStretch="{TemplateBinding FontStretch}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="0,0,0,0" Grid.Row="1" Style="{TemplateBinding ExpandableContentControlStyle}" VerticalAlignment="{TemplateBinding VerticalAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

PS. Если вы хотите анимировать расширение / свертывание, вы можете просто определить свою собственную анимацию в визуальных состояниях AccordionItem s Collapsed и Expanded.

Это действительно запоздалый ответ, и надеюсь, что он может помочь. :)

2 голосов
/ 15 апреля 2011

У меня была похожая проблема давным-давно, я думаю, что это то, что я сделал. В основном в событии изменения размера внутренней сетки данных мы повторно вызываем проход измерения аккордеона.

Во внутренней сетке данных прикрепите событие изменения размера следующим образом. 

private void InnerDataGrid_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
    {
        this.AccordionName.Measure(new Size());
        this.AccordionName.UpdateLayout();
    }
0 голосов
/ 19 ноября 2010

этот код продемонстрирует проблему

Аккордеон в суб-суб-аккордеоне не будет расширяться при первом его расширении. Однако, если вы свернете его родителя и повторно расширитесь, он покажет. Alternativley изменить размер окна браузера, и он также будет изменять размер каждого тега, чтобы показать его.

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

<UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">

    <Grid x:Name="LayoutRoot" Background="White">
        <toolkit:Accordion  HorizontalAlignment="Stretch" Name="accordion1" SelectionMode="ZeroOrOne"  >
            <toolkit:AccordionItem>
                <toolkit:AccordionItem.Header>
                    <TextBlock Text="Title"  />
                </toolkit:AccordionItem.Header>

                <toolkit:AccordionItem.Content>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>

                        <TextBox Grid.Row="0"  Height="200" Width="400" />
                        <toolkit:Accordion Grid.Row="1" HorizontalAlignment="Stretch" Name="subAccordion" SelectionMode="ZeroOrOne" >
                            <toolkit:AccordionItem>
                                <toolkit:AccordionItem.Header>
                                    <TextBlock Text="Sub Accordion"  />
                                </toolkit:AccordionItem.Header>
                                <toolkit:AccordionItem.Content>
                                    <Grid>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="auto"/>
                                            <RowDefinition Height="auto"/>
                                        </Grid.RowDefinitions>

                                        <TextBox Grid.Row="0"  Height="150" Width="400" Text="Sub Accordion" />
                                        <toolkit:Accordion Grid.Row="1"  HorizontalAlignment="Stretch" Name="subAccordion2" SelectionMode="ZeroOrOne" >
                                            <toolkit:AccordionItem>
                                                <toolkit:AccordionItem.Header>
                                                    <TextBlock Text="Sub sub Accordion"  />
                                                </toolkit:AccordionItem.Header>
                                                <toolkit:AccordionItem.Content>
                                                    <TextBox Text="sub sub" Height ="100" />
                                                </toolkit:AccordionItem.Content>
                                            </toolkit:AccordionItem>
                                        </toolkit:Accordion>
                                    </Grid>

                                </toolkit:AccordionItem.Content>
                            </toolkit:AccordionItem>
                        </toolkit:Accordion>
                    </Grid>


                </toolkit:AccordionItem.Content>
            </toolkit:AccordionItem>
        </toolkit:Accordion>
    </Grid>
</UserControl>
...