Кнопки переключения WPF с пользовательским шаблоном не принимают клики в нужной области

Question

Я относительный новичок в пространстве WPF, поэтому я уверен, что это будет первый из многих вопросов!

У меня есть серия кнопок-переключателей с собственным шаблоном, предназначенным для отображения изображения с прозрачным фоном, которое затем подсвечивается, когда пользователь переключает кнопку. Я хотел добавить отступы вокруг содержимого, чтобы выделенная область распространялась вокруг содержимого. Это работает, но пользователь все еще должен щелкнуть во внутренней области, чтобы активировать кнопку, а это не то, что я хочу.

Я предполагаю, что это потому, что я использую свойство Margin ContentPresenter для привязки к отступу кнопки, и это классифицируется как вне содержимого, но не уверен, что это лучший способ исправить это. Это действительно работает при отмене выбора кнопки.

Ниже приведен пример XAML, показывающий проблему, которую можно скопировать и вставить прямо в 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>

Кто-нибудь знает, как я могу это исправить?

Answer 1

Добро пожаловать в мир WPF :). Это происходит из-за ... фона кисти. Если вы не установите его, он будет нулевым. А это значит, что он не виден для механизма проверки попадания. Быстрое исправление к этому набору Background="Transparent" к MainGrid. Но более подходящий способ установить его с помощью стилей:

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