如何在uwp中创建圆角按钮和鼠标悬停效果 [英] How to create a round corner button and mouse over effect in uwp

问题描述

你好朋友



i想要创建一个圆角按钮并在鼠标点击它改变uwp xaml中的前景色和背景色。



i有一个代码样式，可以创建一个圆形按钮但是如何在uwp中更改按钮的前景和背景颜色



thnaks in advace。 :)祝你有美好的一天...... :)



我尝试过的事情：

<样式x：Key =RoundBtnTargetType =Button> 
< Setter Property =BackgroundValue =＃27aae1/> 
< Setter Property =ForegroundValue ={ThemeResource SystemControlForegroundBaseHighBrush}/> 
< Setter Property =BorderBrushValue ={ThemeResource SystemControlForegroundTransparentBrush}/> 
< Setter Property =BorderThicknessValue ={ThemeResource ButtonBorderThemeThickness}/> 
< Setter Property =PaddingValue =8,4,8,4/> 
< Setter Property =Horizo​​ntalAlignmentValue =Left/> 
< Setter Property =VerticalAlignmentValue =Center/> 
< Setter Property =FontFamilyValue ={ThemeResource ContentControlThemeFontFamily}/> 
< Setter Property =FontWeightValue =Normal/> 
< Setter Property =FontSizeValue ={ThemeResource ControlContentThemeFontSize}/> 
< Setter Property =UseSystemFocusVisualsValue =True/> 
< Setter Property =Template> 
< Setter.Value> 
< ControlTemplate TargetType =Button> 
<网格x：名称=RootGrid> 
< VisualStateManager.VisualStateGroups> 
< VisualStateGroup x：Name =CommonStates> 
< VisualState x：Name =Normal> 
< Storyboard> 
< PointerUpThemeAnimation Storyboard.TargetName =RootGrid/> 
< / Storyboard> 
< / VisualState> 
 
< / VisualStateGroup> 
< /VisualStateManager.VisualStateGroups> 
< Rectangle RadiusX =20RadiusY =20Fill ={TemplateBinding Background}Margin =0,0,10,0/> 
< ContentPresenter x：Name =ContentPresenterAutomationProperties.AccessibilityView =RawBorderBrush ={TemplateBinding BorderBrush}BorderThickness ={TemplateBinding BorderThickness}ContentTemplate ={TemplateBinding ContentTemplate}ContentTransitions ={TemplateBinding ContentTransitions}Content ={TemplateBinding Content}Horizo​​ntalContentAlignment ={TemplateBinding Horizo​​ntalContentAlignment}Padding ={TemplateBinding Padding}VerticalContentAlignment ={TemplateBinding VerticalContentAlignment}/> 
< Button Content =ButtonHorizo​​ntalContentAlignment =LeftVerticalAlignment =TopHorizo​​ntalAlignment =LeftMargin = -  333，-562,0,0/> 
< / Grid> 
< / ControlTemplate> 
< /Setter.Value> 
< / Setter> 
< / Style> 

< Button FontSize =14FontFamily ={StaticResource inventoryFont}Grid.Row =4Grid.Column =4Style ={StaticResource RoundBtn}Background =＃27AAE1MinWidth =220Height =40 Foreground =＃ffffffClick =AuthenticateUserName =LoginBtnHorizo​​ntalAlignment =LeftVerticalAlignment =CenterWidth =171Padding =0,0,0,0BorderThickness =0,0,0 ，0UseSystemFocusVisuals =TrueUseLayoutRounding =TrueFocusVisualPrimaryBrush =＃00000000FocusVisualSecondaryBrush =＃00000000Margin =0,0,0,0>登录< / Button> 
 

以上样式可以创建一个带圆角的按钮，但是如何让鼠标点击效果？?? div class =h2_lin>解决方案

我，我只是在点击事件中使用代码隐藏来设置发送者为按钮的颜色。



（我不能用XAML做这件事，因为UWP与WPF没有相同的触发器，我可能会考虑）。



时间是太宝贵了，无法成为MVVM的奴隶，也无法激励人们寻求纯粹的XAML解决方案（IMO）。

hello friends

i want to create a round corner button and on mouse click its change the foreground and background color in uwp xaml.

i have a code style which create a round button but how to change the button foreground and background color in uwp

thnaks in advace. :) have a great day... :)

What I have tried:

<Style x:Key="RoundBtn" TargetType="Button">
            <Setter Property="Background" Value="#27aae1"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
            <Setter Property="Padding" Value="8,4,8,4"/>
            <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="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" >
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>

                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle RadiusX="20" RadiusY="20" Fill="{TemplateBinding Background}" Margin="0,0,10,0" />
                            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Button Content="Button" HorizontalContentAlignment="Left" VerticalAlignment="Top"  HorizontalAlignment="Left" Margin="-333,-562,0,0"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<Button FontSize="14" FontFamily="{StaticResource inventoryFont}" Grid.Row="4" Grid.Column="4" Style="{StaticResource RoundBtn}" Background="#27AAE1"  MinWidth="220" Height="40" Foreground="#ffffff" Click="AuthenticateUser" Name="LoginBtn" HorizontalAlignment="Left" VerticalAlignment="Center" Width="171" Padding="0,0,0,0" BorderThickness="0,0,0,0" UseSystemFocusVisuals="True" UseLayoutRounding="True" FocusVisualPrimaryBrush="#00000000" FocusVisualSecondaryBrush="#00000000" Margin="0,0,0,0">Login</Button>

above style can create a button with round corner but how to give the mouse over click effect ??

解决方案

Me, I would just use "code-behind" in the click event to set the colors of the "sender as button".

(I cannot be bothered doing it with XAML because UWP does not have the same triggers as WPF which I might consider).

Time is too precious to be a slave to MVVM or whatever motivates one to seek a "pure" XAML solution (IMO).

这篇关于如何在uwp中创建圆角按钮和鼠标悬停效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！