WPF DevExpress带图和文本的Button实现全区域可点击问题

问题原因 #

你的Button内部使用了dxe:TextEdit控件，即便设置了IsReadOnly="True"，该控件仍会默认捕获鼠标输入事件，阻止事件向上冒泡到父级Button，导致点击文本区域时无法触发Button的点击命令。

解决方案 #

方案1：替换为TextBlock（推荐）

如果仅需显示文本无需编辑功能，直接用TextBlock替代dxe:TextEdit即可，它不会拦截鼠标事件：

<dxlc:LayoutItem Width="80" Margin="0,0,0,0">
   <Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ob:ViewModel}}, Path=DataContext.ClickCommand}"  
           ToolTip="Click this button"
           Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
           BorderThickness="1" 
           BorderBrush="DimGray">
     <StackPanel Orientation="Horizontal">
        <Image Source="../../../Resources/Ext/image.png" MaxHeight="16" MinHeight="16" Stretch="Uniform" />
        <TextBlock Text="Click Me" Foreground="White" Background="Transparent"/>
     </StackPanel>
   </Button>
</dxlc:LayoutItem>

方案2：禁用TextEdit的鼠标命中测试

若必须保留dxe:TextEdit（比如依赖其特定样式），添加IsHitTestVisible="False"属性，让控件不响应鼠标事件，事件会透传到Button：

<dxlc:LayoutItem Width="80" Margin="0,0,0,0">
   <Button Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ob:ViewModel}}, Path=DataContext.ClickCommand}"  
           ToolTip="Click this button"
           Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" 
           BorderThickness="1" 
           BorderBrush="DimGray">
     <StackPanel Orientation="Horizontal">
        <Image Source="../../../Resources/Ext/image.png" MaxHeight="16" MinHeight="16" Stretch="Uniform" />
        <dxe:TextEdit EditValue="Click Me" IsReadOnly="True" ShowBorder="False" 
                      Foreground="White" Background="Transparent"
                      IsHitTestVisible="False"/>
     </StackPanel>
   </Button>
</dxlc:LayoutItem>

方案3：自定义Button模板

如果需要更复杂的交互控制，可以修改Button的ControlTemplate，确保内部所有元素的事件都能正确传递到Button的命令触发逻辑，但前两种方案更轻量直接。

内容的提问来源于stack exchange，提问作者Django