Nút bật tắt WPF có mẫu tùy chỉnh không chấp nhận nhấp vào đúng khu vực

Question

Tôi là người mới bắt đầu tương đối trong không gian WPF vì vậy tôi chắc chắn đây sẽ là câu hỏi đầu tiên của nhiều câu hỏi!

Tôi có một loạt các nút bật tắt, tất cả đều có mẫu tùy chỉnh được thiết kế để hiển thị hình ảnh có nền trong suốt sau đó được tô sáng khi người dùng bật nút. Tôi muốn thêm khoảng đệm xung quanh nội dung để khu vực được đánh dấu có phạm vi xung quanh nội dung. Thao tác này đang hoạt động nhưng người dùng vẫn phải nhấp vào khu vực bên trong để kích hoạt nút, đó không phải là điều tôi muốn.

Tôi cho rằng đó là vì tôi đang sử dụng thuộc tính Margin của ContentPresenter để liên kết với Padding của nút và điều này được phân loại là bên ngoài nội dung, nhưng không chắc chắn cách tốt nhất để khắc phục điều này. Nó hoạt động khi bỏ chọn nút mặc dù.

Dưới đây là một số XAML cho thấy sự cố có thể được sao chép và dán thẳng vào XamlPad.

<Page.Resources> 
    <Style x:Key="ValidationToggleButton" TargetType="ToggleButton"> 
    <Setter Property="Padding" Value="5" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate > 
       <Grid Name="MainGrid"> 
        <Viewbox> 
         <ContentPresenter Margin="{TemplateBinding Padding}" 
           Content="{TemplateBinding Property=Button.Content}" /> 
        </Viewbox> 
       </Grid> 

       <ControlTemplate.Triggers> 
        <Trigger Property="ToggleButton.IsChecked" Value="True"> 
         <Setter TargetName="MainGrid" Property="Background" Value="#88FFFF55" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 

      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
</Page.Resources> 
<Grid> 
<GroupBox Grid.Column="0" Header="Validation" BorderBrush="#55BBE6" Margin="2" > 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <ToggleButton Grid.Column="0" Style="{StaticResource ValidationToggleButton}"> 
      CLICK 
     </ToggleButton> 
    </Grid> 
</GroupBox> 
</Grid> 

Bất kỳ ai có ý tưởng nào về cách sửa lỗi này?

Answer 1

Chào mừng bạn đến với thế giới WPF :). Điều đó xảy ra vì bàn chải ... nền. Nếu bạn không đặt nó là null. Và điều đó có nghĩa là nó không hiển thị cho cơ chế thử nghiệm hit. Sửa nhanh thiết lập này Background="Transparent" thành MainGrid. Nhưng cách thích hợp hơn để đặt thông qua phong cách:

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
<Page.Resources> 
    <Style x:Key="ValidationToggleButton" TargetType="ToggleButton"> 
    <Setter Property="Padding" Value="5" /> 
    <Setter Property="Background" Value="Transparent"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate > 
       <Grid Name="MainGrid" Background="{TemplateBinding Background}"> 
        <Viewbox> 
         <ContentPresenter Margin="{TemplateBinding Padding}" 
           Content="{TemplateBinding Property=Button.Content}" /> 
        </Viewbox> 
       </Grid> 

       <ControlTemplate.Triggers> 
        <Trigger Property="ToggleButton.IsChecked" Value="True"> 
         <Setter TargetName="MainGrid" Property="Background" Value="#88FFFF55" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 

      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 
</Page.Resources> 
<Grid> 
<GroupBox Grid.Column="0" Header="Validation" BorderBrush="#55BBE6" Margin="2" > 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <ToggleButton Grid.Column="0" Style="{StaticResource ValidationToggleButton}"> 
      CLICK 
     </ToggleButton> 
    </Grid> 
</GroupBox> 
</Grid> 
</Page>