2

我正在尝试制作扩展器列表，而只选择了一个扩展器。现在我已经覆盖了扩展器，使其看起来像我想要的那样。在标题中，我有 ToggleButton，我将 Command 绑定到它。

基本上，每次我从列表中展开扩展器时，我都想做一个动作

所以清单是：

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