本文介绍了如何在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>解决方案


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

解决方案


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

09-05 20:18
查看更多