System Glow Button WPF alatt

System Glow Button WPF alatt
2015-11-01T09:59:23+01:00
2015-11-09T11:54:53+01:00
2022-10-15T22:45:46+02:00
Gabee8
Sziasztok!
Lenne egy kis problémám.
Van egy programom amit WPF-ként írok át. A régi programom Windows Form-al volt írva ott volt egy toolstripbutton aminek a renderer-t System értékre állítottam és a csatolmányon látható kinézetű lett a gomb.
Hogyan lehet ezt a gombot megvalósítani WPF-alatt? Vagy van valamilyen megnevezése az ilyen kinézetű gombnak?
Amúgy a Windows 7 alatti hangrögzítőnek a Virtualbox eszköztárjának is ilyen a gombjai.
Sajnos egy egyszerű gombnak nem tudtam a renderer-jét beállítani System értékre wpf alatt.
Köszönöm előre is!
Gabee8
Mutasd a teljes hozzászólást!
Csatolt állomány
Így oldottam meg:

<Style x:Key="ShadowStyle"> <Setter Property="Control.Foreground" Value="LightGray" /> </Style> <Style x:Key="VistaCommandButton" TargetType="Button"> <Setter Property="OverridesDefaultStyle" Value="True"/> <Setter Property="Margin" Value="2"/> <Setter Property="Button.Effect"> <Setter.Value> <DropShadowEffect Color="#A1000000" Direction="300" ShadowDepth="1" BlurRadius="3" Opacity="0.2" /> </Setter.Value> </Setter> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Name="border" BorderThickness="1" Padding="2" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2" Background="{TemplateBinding Background}"> <Grid > <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="contentShadow" Style="{StaticResource ShadowStyle}"> <ContentPresenter.RenderTransform> <TranslateTransform X="1.0" Y="1.0" /> </ContentPresenter.RenderTransform> </ContentPresenter> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="border" Property="BorderBrush" Value="#4E000000" /> <Setter Property="Background" > <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#78FAFAFA" Offset="0.0"/> <GradientStop Color="#31C5C5C5" Offset="0.30" /> <GradientStop Color="#286D6D6D" Offset="0.30" /> <GradientStop Color="#28727272" Offset="0.45" /> <GradientStop Color="#12F0F0F0" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="border" Property="BorderBrush" Value="#7C000000" /> <Setter Property="Background" > <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#71313131" Offset="0.02" /> <GradientStop Color="#1B000000" Offset="0.06" /> <GradientStop Color="#0D000000" Offset="0.45" /> <GradientStop Color="#0B000000" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="content" Property="RenderTransform" > <Setter.Value> <TranslateTransform Y="1.0" /> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsDefaulted" Value="True"> <Setter TargetName="border" Property="BorderBrush" Value="#4E000000" /> </Trigger> <Trigger Property="IsFocused" Value="True"></Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="border" Property="Opacity" Value="0.7" /> <Setter Property="Foreground" Value="Gray" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
Köszönöm az ötleteket! (a honlapom programozás részére felteszem a kész kódot ennek a gombnak)
Mutasd a teljes hozzászólást!

  • Helló

    Nézd meg ezt (az utolsó hozzászólást próbáld ki): Glow effect on MouseEnter WPFRemélem, ez segít.

    Üdv

    KGy
    Mutasd a teljes hozzászólást!
  • Valamelyik nap így próbáltam megoldani a gombot:

    <Window.Resources> <LinearGradientBrush x:Key="ToolstripFill" StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#78FAFAFA" Offset="0.0"/> <GradientStop Color="#31C5C5C5" Offset="0.30" /> <GradientStop Color="#286D6D6D" Offset="0.30" /> <GradientStop Color="#28727272" Offset="0.45" /> <GradientStop Color="#12F0F0F0" Offset="1.0" /> </LinearGradientBrush> <LinearGradientBrush x:Key="ToolstripFill2" StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#71313131" Offset="0.02" /> <GradientStop Color="#1B000000" Offset="0.06" /> <GradientStop Color="#0D000000" Offset="0.45" /> <GradientStop Color="#0B000000" Offset="1.0" /> </LinearGradientBrush> </Window.Resources> <Button x:Name="Button1" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="132" Height="48" HorizontalContentAlignment="Left" Margin="0,0,20,30"> <Button.Content> <StackPanel Orientation="Horizontal" Height="46" Width="130"> <Image Source="Images/myimage.png" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" Width="33" Height="33" /> <TextBlock Text="button" VerticalAlignment="Center" Foreground="#FFFF8000" FontWeight="Bold" FontSize="15"> </TextBlock> </StackPanel> </Button.Content> <Button.Style> <Style TargetType="{x:Type Button}"> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border Background="{TemplateBinding Background}" > <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/> </Border> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border BorderThickness="1" ClipToBounds="True" CornerRadius="2"> <Border Background="{StaticResource ToolstripFill}"> <Border Background="Transparent" BorderBrush="#4E000000" BorderThickness="1" CornerRadius="2"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter> </Border> </Border> </Border> </ControlTemplate> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border BorderThickness="1" ClipToBounds="True" CornerRadius="2"> <Border Background="{StaticResource ToolstripFill2}"> <Border Background="Transparent" BorderBrush="#7C000000" BorderThickness="1" CornerRadius="2"> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter> </Border> </Border> </Border> </ControlTemplate> </Setter.Value> </Setter> </Trigger> </Style.Triggers> </Style> </Button.Style> </Button>
    Csatoltam a programot hogy milyen eredmény született. Csak még valahogy a mousehover-hez kell egy átmenet hogy szépen lassan jelenjen meg a gomb háttere...
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Most nem tudom kipróbálni a programodat, de mi lenne, ha kipróbálnád azt, amit küldtem:

    <Window.Resources> <DropShadowEffect x:Key="MyEffect" ShadowDepth="0" Color="Blue" Opacity="1" BlurRadius="20"/> </Window.Resources>
    ...

    <Style.Triggers> <Trigger Property="Button.IsMouseOver" Value="True"> <Setter Property="Button.Effect" Value="{StaticResource MyEffect}" /> </Trigger> </Style.Triggers>
    Üdv

    KGy
    Mutasd a teljes hozzászólást!
  • hello

    nem túl szerencsés megoldás az egész template-t cserélgetni.
    A Button rendelkezik egy halom VisualState-el, egyszerűbb ott animálni a dolgokat

    <!-- ****************************************************************** ** ** These are the resources for button style ** ** Place them into separate resource file ** Using this method, you can easily change the button look ** ******************************************************************* --> <System:Double x:Key="ButtonContentFontSize">12</System:Double> <FontFamily x:Key="ButtonContentFontFamily">Arial</FontFamily> <FontWeight x:Key="ButtonContentFontWeight">Medium</FontWeight> <SolidColorBrush x:Key="ButtonContentBackgroundColor" Color="#808000"/> <SolidColorBrush x:Key="ButtonContentMouseOverBackgroundColor" Color="#404020"/> <SolidColorBrush x:Key="ButtonContentFocusedBackgroundColor" Color="#FF8020"/> <SolidColorBrush x:Key="ButtonContentErrorBackgroundColor" Color="Red"/> <SolidColorBrush x:Key="ButtonContentForegroundColor" Color="White"/> <SolidColorBrush x:Key="ButtonBorderColor" Color="Black"/> <Thickness x:Key="ButtonBorderThickness">1</Thickness> <CornerRadius x:Key="ButtonBorderCornerRadius">3</CornerRadius> <Thickness x:Key="ButtonPadding">5</Thickness> <Thickness x:Key="ButtonMargin">4</Thickness> <System:Double x:Key="ButtonMinHeight">24</System:Double> <System:Double x:Key="ButtonMinWidth">10</System:Double> <!-- ****************************************************************** ** ** The button style ** ******************************************************************* --> <Style TargetType="{x:Type Button}"> <Setter Property="FocusVisualStyle" Value="{x:Null}"/> <Setter Property="OverridesDefaultStyle" Value="True"/> <Setter Property="ToolTipService.ShowOnDisabled" Value="True"/> <Setter Property="FontWeight" Value="{DynamicResource ButtonContentFontWeight}" /> <Setter Property="FontSize" Value="{DynamicResource ButtonContentFontSize}" /> <Setter Property="FontFamily" Value="{DynamicResource ButtonContentFontFamily}" /> <Setter Property="Foreground" Value="{DynamicResource ButtonContentForegroundColor}" /> <Setter Property="Padding" Value="{DynamicResource ButtonPadding}" /> <Setter Property="Margin" Value="{DynamicResource ButtonMargin}"/> <Setter Property="MinHeight" Value="{DynamicResource ButtonMinHeight}"/> <Setter Property="MinWidth" Value="{DynamicResource ButtonMinWidth}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid x:Name="Container" RenderTransformOrigin="0.5,0.5"> <Grid.RenderTransform> <ScaleTransform/> </Grid.RenderTransform> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseoverBackground" To="1" Duration="0:0:0.15"/> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" Storyboard.TargetName="Container" To="1.08" Duration="0:0:0.15"/> <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" Storyboard.TargetName="Container" To="1.08" Duration="0:0:0.15"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Container" To="0.3" Duration="0:0:0.15"/> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="FocusedBackground"> <EasingDoubleKeyFrame KeyTime="0" Value="0" /> <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Unfocused" /> </VisualStateGroup> <VisualStateGroup x:Name="ValidationStates"> <VisualState x:Name="Valid"/> <VisualState x:Name="InvalidFocused"/> <VisualState x:Name="InvalidUnfocused"> <Storyboard> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="ErrorBackground"> <EasingDoubleKeyFrame KeyTime="0" Value="0" /> <EasingDoubleKeyFrame KeyTime="0:0:0.25" Value="1" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Border x:Name="DefaultBackground" Background="{DynamicResource ButtonContentBackgroundColor}" BorderBrush="{DynamicResource ButtonBorderColor}" BorderThickness="{DynamicResource ButtonBorderThickness}" CornerRadius="{DynamicResource ButtonBorderCornerRadius}"/> <Border x:Name="FocusedBackground" Opacity="0" Background="{DynamicResource ButtonContentFocusedBackgroundColor}" BorderBrush="{DynamicResource ButtonBorderColor}" BorderThickness="{DynamicResource ButtonBorderThickness}" CornerRadius="{DynamicResource ButtonBorderCornerRadius}"/> <Border x:Name="MouseoverBackground" Opacity="0" Background="{DynamicResource ButtonContentMouseOverBackgroundColor}" BorderBrush="{DynamicResource ButtonBorderColor}" BorderThickness="{DynamicResource ButtonBorderThickness}" CornerRadius="{DynamicResource ButtonBorderCornerRadius}"/> <Border x:Name="ErrorBackground" Opacity="0" Background="{DynamicResource ButtonContentErrorBackgroundColor}" BorderBrush="{DynamicResource ButtonBorderColor}" BorderThickness="{DynamicResource ButtonBorderThickness}" CornerRadius="{DynamicResource ButtonBorderCornerRadius}"/> <ContentPresenter x:Name="contentPresenter" RecognizesAccessKey="True" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}" VerticalAlignment="Center" /> </Grid> </ControlTemplate> </Setter.Value> </Setter> <Style.Triggers> <Trigger Property="Validation.HasError" Value="true"> <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors).CurrentItem.ErrorContent}"/> <Setter Property="IsEnabled" Value="False"/> </Trigger> </Style.Triggers> </Style>
    erre szükséged lehet
    xmlns:System="clr-namespace:System;assembly=mscorlib"
    Mutasd a teljes hozzászólást!
  • Szia jó ötletet adtál...
    Kicsit tovább kutakodtam a neten és kiderült hogy ez a gomb olyan mint a "Vista command link button"
    CommandLink in WPF
    Mutasd a teljes hozzászólást!
  • Így oldottam meg:

    <Style x:Key="ShadowStyle"> <Setter Property="Control.Foreground" Value="LightGray" /> </Style> <Style x:Key="VistaCommandButton" TargetType="Button"> <Setter Property="OverridesDefaultStyle" Value="True"/> <Setter Property="Margin" Value="2"/> <Setter Property="Button.Effect"> <Setter.Value> <DropShadowEffect Color="#A1000000" Direction="300" ShadowDepth="1" BlurRadius="3" Opacity="0.2" /> </Setter.Value> </Setter> <Setter Property="Background" Value="Transparent"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Border Name="border" BorderThickness="1" Padding="2" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="2" Background="{TemplateBinding Background}"> <Grid > <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="contentShadow" Style="{StaticResource ShadowStyle}"> <ContentPresenter.RenderTransform> <TranslateTransform X="1.0" Y="1.0" /> </ContentPresenter.RenderTransform> </ContentPresenter> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Name="content"/> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter TargetName="border" Property="BorderBrush" Value="#4E000000" /> <Setter Property="Background" > <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <GradientStop Color="#78FAFAFA" Offset="0.0"/> <GradientStop Color="#31C5C5C5" Offset="0.30" /> <GradientStop Color="#286D6D6D" Offset="0.30" /> <GradientStop Color="#28727272" Offset="0.45" /> <GradientStop Color="#12F0F0F0" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="border" Property="BorderBrush" Value="#7C000000" /> <Setter Property="Background" > <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > <GradientStop Color="#71313131" Offset="0.02" /> <GradientStop Color="#1B000000" Offset="0.06" /> <GradientStop Color="#0D000000" Offset="0.45" /> <GradientStop Color="#0B000000" Offset="1.0" /> </LinearGradientBrush> </Setter.Value> </Setter> <Setter TargetName="content" Property="RenderTransform" > <Setter.Value> <TranslateTransform Y="1.0" /> </Setter.Value> </Setter> </Trigger> <Trigger Property="IsDefaulted" Value="True"> <Setter TargetName="border" Property="BorderBrush" Value="#4E000000" /> </Trigger> <Trigger Property="IsFocused" Value="True"></Trigger> <Trigger Property="IsEnabled" Value="False"> <Setter TargetName="border" Property="Opacity" Value="0.7" /> <Setter Property="Foreground" Value="Gray" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
    Köszönöm az ötleteket! (a honlapom programozás részére felteszem a kész kódot ennek a gombnak)
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd