点击模板按钮

Question

我想创建一个自定义按钮显示模板。出于某种原因，我不会使用 Style={ThemeResource ButtonRevealStyle}。所以，我在按钮控件模板中添加了 ListViewItem。

<Style TargetType="Button" x:Key="ButtonListView">
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Control.IsTemplateFocusTarget="True">
                    <StackPanel>
                        <ListViewItem>
                            <ContentPresenter></ContentPresenter>
                        </ListViewItem>
                    </StackPanel>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<Button Style="{ThemeResource ButtonListView}" Click="list_refresh">
    <TextBlock Text="Button Content"/>
</Button>

插图：

但是当我点击它时，点击事件不会触发。我认为它在 ListViewItem 上触发，而不是在按钮上触发。最令人困惑的是，它可能会使用键盘触发。

Answer 1

<块引用>

点击模板化按钮

正如@Vincent 所说ListViewItem 是第一个捕获您的点击事件，对于您的场景，我们建议您自定义按钮显示样式并使用 ListViewItem 显示主题资源。或者使用 Button Tapped 事件来替换。

例如：

<Style x:Key="CudtomButtonRevealStyle" TargetType="Button">
    <Setter Property="Background" Value="{ThemeResource ListViewItemRevealBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
    <Setter Property="BorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonRevealBorderThemeThickness}" />
    <Setter Property="Padding" Value="{ThemeResource ButtonPadding}" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
    <Setter Property="FocusVisualMargin" Value="-3" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid
                    x:Name="RootGrid"
                    Background="{TemplateBinding Background}"
                    CornerRadius="{TemplateBinding CornerRadius}">
                    <ContentPresenter
                        x:Name="ContentPresenter"
                        Padding="{TemplateBinding Padding}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        AutomationProperties.AccessibilityView="Raw"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        CornerRadius="{TemplateBinding CornerRadius}" />

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.(RevealBrush.State)" Value="PointerOver" />
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ListViewItemRevealBackgroundPointerOver}" />
                                    <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPointerOver}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.(RevealBrush.State)" Value="Pressed" />
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ListViewItemRevealBackgroundPressed}" />
                                    <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundPressed}" />
                                </VisualState.Setters>

                                <Storyboard>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Target="RootGrid.Background" Value="{ThemeResource ButtonRevealBackgroundDisabled}" />
                                    <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource ButtonRevealBorderBrushDisabled}" />
                                    <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ButtonForegroundDisabled}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

使用

<Button
    VerticalAlignment="Bottom"
    Click="Button_Click"
    Content="Connect"
    Style="{ThemeResource CudtomButtonRevealStyle}" />

Answer 2

这是焦点问题。当您使用键盘时，您可以使用 Tab 将焦点移动到 Button，因此它会触发点击事件。

当您使用指针并按下 Button 时，ListViewItem 是第一个捕获您的点击事件的事件，您可以将 Tapped 事件添加到 ListViewItem来证明。

因此，如果您坚持希望 Button 响应您的指针，我认为您可以删除 ListViewItem。

   <ControlTemplate TargetType="Button">
        <Grid Control.IsTemplateFocusTarget="True">
            Add button content here
        </Grid>
    </ControlTemplate>