![create create](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了如何在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 =HorizontalAlignmentValue =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}HorizontalContentAlignment ={TemplateBinding HorizontalContentAlignment}Padding ={TemplateBinding Padding}VerticalContentAlignment ={TemplateBinding VerticalContentAlignment}/>
< Button Content =ButtonHorizontalContentAlignment =LeftVerticalAlignment =TopHorizontalAlignment =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 =LoginBtnHorizontalAlignment =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中创建圆角按钮和鼠标悬停效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!