2

エキスパンダーのリストを作成しようとしていますが、エキスパンダーは 1 つしか選択されていません。ヘッダーには、コマンドをバインドした ToggleButton があります。

基本的に、リストからエキスパンダーを展開するたびにアクションを実行したい

したがって、リストは次のとおりです。

<ListBox ItemsSource="{Binding DeviceEvents}" Style="{DynamicResource EventsList}"/>

リストのスタイル:

<Style TargetType="ListBoxItem" x:Key="listboxEventitemDisableBackground">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <ContentPresenter Margin="0,0,0,6"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="EventsList" TargetType="{x:Type ListBox}" BasedOn="{StaticResource BaseListProps}">
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <StackPanel HorizontalAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="ItemContainerStyle" Value="{StaticResource listboxEventitemDisableBackground}"/>
</Style>

これで、リスト内の各オブジェクトが ViewModel にバインドされ、次のように記述されました。

<Expander Name="check" Margin="0,0,0,0" Header="Test" Style="{StaticResource EventTileExpander}">
    <StackPanel>
        Some Content...
    </StackPanel>
</Expander>

重要な部分は次のスタイルです: (MarkAsReadCommand バインディング上)

<Style x:Key="EventTileExpander" TargetType="{x:Type Expander}">
    <Setter Property="FontFamily" Value="Helvetica Neue LT Std Light"/>
    <Setter Property="FontSize" Value="15"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="IsExpanded" Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Expander}">
                <Grid VerticalAlignment="Top" Name="ExpanderBorder" Background="#51000000">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <ToggleButton Content="{TemplateBinding Header}"
                      Template="{DynamicResource AnimatedExpanderTemplate}"
                      IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" 
                        Command="{Binding MarkAsReadCommand}"/>

                    <ContentPresenter x:Name="ExpanderContent" ContentSource="Content" Grid.Row="1" Margin="10,-13,0,0">
                        <ContentPresenter.LayoutTransform>
                            <ScaleTransform ScaleY="0"/>
                        </ContentPresenter.LayoutTransform>
                    </ContentPresenter>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsExpanded" Value="True">

                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>

                                    <!-- Expand out -->
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)" 
                                                                   Storyboard.TargetName="ExpanderContent" >
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <QuarticEase EasingMode="EaseOut" />
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>

                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                        <Trigger.ExitActions>
                            <BeginStoryboard>
                                <Storyboard>

                                    <!-- Shrink in -->
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentPresenter.LayoutTransform).(ScaleTransform.ScaleY)" 
                                                                   Storyboard.TargetName="ExpanderContent" >
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <QuarticEase EasingMode="EaseOut" />
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>

                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.ExitActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

ToggleButton の内部テンプレート:

<ControlTemplate x:Key="AnimatedExpanderTemplate" TargetType="{x:Type ToggleButton}">
    <Grid Name="GridContent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <Control Template="{DynamicResource Clock4Icon}" VerticalAlignment="Top" Margin="15,15,15,10"/>
            <TextBlock Text="{Binding EventTime}" HorizontalAlignment="Center" FontSize="13" FontFamily="Helvetica Neue LT Std 47 Light" Foreground="White"/>
        </StackPanel>
        <StackPanel Grid.Column="1">
            <TextBlock Text="{Binding EventTitle}" Foreground="{DynamicResource EventOrange}" Margin="0,15,0,0" FontSize="15" FontFamily="Helvetica Neue LT Std 47 Condensed"/>
            <TextBlock Text="{Binding EventHeaderMessage}" TextWrapping="WrapWithOverflow" Foreground="White" Margin="0,5,10,0" FontSize="12" FontFamily="Helvetica Neue LT Std 47 Light Condensed" Opacity="0.9"/>
        </StackPanel>
    </Grid>
</ControlTemplate>

だから私は基本的にそれを機能させるために多くのことを試みましたが、成功しませんでした..

コマンドが実行された理由だけがわかりません（コマンドに条件はありません）。Mvvm Light の RelayCommand を使用しています。

クリックが常にコントロールに引っかかるとは限らないようです..

任意の助けをいただければ幸いです。

4

1 に答える 1

0

私はそれがあなたのアニメーションに関係しているのではないかと疑っています. それらが拡大/縮小している間、マウスクリックをキャプチャするための背景が事実上ないということでしょうか?

于 2013-11-21T15:00:58.757 に答える