WPF 自定义扩展器按钮样式未正确响应鼠标单击答案

【问题标题】：WPF Custom Expander button style not responding properly to mouse clicksWPF 自定义扩展器按钮样式未正确响应鼠标单击
【发布时间】：2011-10-14 19:38:30
【问题描述】：

我让他遵循扩展器切换按钮样式，这在视觉上越来越接近我想要的，但它没有正确响应点击。当您单击它展开或折叠时，它并不总是响应。有任何想法吗？ TIA。

       <ControlTemplate x:Key="ExpanderToggleButton"
         TargetType="ToggleButton">
            <Canvas Width="14" Height="14">
                <Rectangle Stroke="Gray"  
                           RenderOptions.EdgeMode="Aliased" 
                           StrokeThickness="1"  Width="14" Height="14" 
                           Canvas.Left="0" Canvas.Top ="0"/>
                <Path RenderOptions.EdgeMode="Aliased" 
                          Name="ExpandPath" 
                          Stroke="Black" 
                          Margin="0" 
                          StrokeThickness="1" 
                          Data="M 5 1 L 5 9 M 1 5 L 9 5" 
                      Canvas.Left="2" Canvas.Top ="2"/>            
            </Canvas>
            <ControlTemplate.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="Data" TargetName="ExpandPath"
                              Value="M 1 5 L 9 5"/>
                </Trigger>                   
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <!-- Expander style -->
        <Style TargetType="Expander">                
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Expander">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Name="ContentRow" Height="0"/>
                            </Grid.RowDefinitions>                              
                            <Border 
                                Name="Border" 
                                Grid.Row="0"                                    
                                BorderThickness="1" 
                                CornerRadius="4,4,0,0" >
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="15" />
                                        <ColumnDefinition Width="*" />
                                     </Grid.ColumnDefinitions>
                                    <ToggleButton
                                        Grid.Column="0"
                                        IsChecked="{Binding Path=IsExpanded, 
                                                            Mode=TwoWay,
                                        RelativeSource={RelativeSource
                                                            TemplatedParent}}"
                                        OverridesDefaultStyle="True" 
                                        Template="{StaticResource 
                                                 ExpanderToggleButton}" />
                                    <ContentPresenter 
                                        Grid.Column="1"
                                        Margin="4" 
                                        ContentSource="Header" 
                                        RecognizesAccessKey="True" />
                                </Grid>
                            </Border>
                            <Border 
                                Name="Content" 
                                Grid.Row="1"                                    
                                BorderThickness="1,0,1,1" 
                                CornerRadius="0,0,4,4" >
                                <ContentPresenter Margin="4" />
                            </Border>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="True">
                                <Setter TargetName="ContentRow" Property="Height"
                                        Value="{Binding 
                                        ElementName=Content,Path=DesiredHeight}" />
                            </Trigger>                             
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

【问题讨论】：

标签： wpf styling

【解决方案1】：

将ControlTemplate中Canvas的背景设置为“透明”：

<ControlTemplate x:Key="ExpanderToggleButton"
    TargetType="ToggleButton">

    <!-- The canvas needs a background to work properly with clicks,
         so set it to Transparent -->
    <Canvas Width="14" Height="14" Background="Transparent">
        <Rectangle Stroke="Gray"  
                    RenderOptions.EdgeMode="Aliased" 
                    StrokeThickness="1"  Width="14" Height="14" 
                    Canvas.Left="0" Canvas.Top ="0"/>
        <Path RenderOptions.EdgeMode="Aliased" 
                    Name="ExpandPath" 
                    Stroke="Black" 
                    Margin="0" 
                    StrokeThickness="1" 
                    Data="M 5 1 L 5 9 M 1 5 L 9 5" 
                Canvas.Left="2" Canvas.Top ="2"/>
    </Canvas>
    <ControlTemplate.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Data" TargetName="ExpandPath"
                        Value="M 1 5 L 9 5"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

当没有画布背景时，您必须准确点击路径（+ 或 -）才能获得点击注册。使用画布背景，您可以单击画布上的任意位置。

【讨论】：

很高兴能帮上忙！我自己也遇到过同样的问题:)

【解决方案2】：

当涉及到滚动查看器时，有时会发生此问题。

尝试添加这个设置器：

<Setter Property="ScrollViewer.CanContentScroll" Value="False" />

【讨论】：