none
WPF - Botão RRS feed

  • Pergunta

  • Olá galera, tenho uma pergunta bem básica e vou mostra-la com fotos.

    Com mouse em cima do botão, ele fica desse jeito.

    Sem o mouse ele fica assim:

    Queria saber como eu faço para tirar aquele efeito. E se tem como eu tirar as bordas do botão.

    • Movido Levi Domingos terça-feira, 23 de outubro de 2012 13:34 (De:C#)
    segunda-feira, 22 de outubro de 2012 23:47

Todas as Respostas

  • opa, posta o XAML que você usou aqui que fica mais fácil te ajudar.
    terça-feira, 23 de outubro de 2012 12:13
  • Você vai ter que refazer todo o template do botão, pegar o template padrão e modificar, não é tão dificil. O botão tem VisualStates (mouseover, clicked, enabled), então você além de estilizar o botão no estado padrão (que foi oq vc fez), você tem que estilizar os outros estados visuais.

    Segue um exemplo de um botão que modifiquei:

    <Style TargetType="Button" x:Key="searchFile">
            <Setter Property="Margin" Value="0"/>
            <Setter Property="BorderBrush" Value="#FF8899BB"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Width" Value="22"/>
            <Setter Property="Height" Value="22"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border x:Name="imageButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0.8" CornerRadius="3">
                            <Border.Background>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FFE5ECF5" Offset="0.966"/>
                                    <GradientStop Color="#FFEDF1F5"/>
                                    <LinearGradientBrush.RelativeTransform>
                                        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="180"/>
                                    </LinearGradientBrush.RelativeTransform>
                                </LinearGradientBrush>
                            </Border.Background>
                            <Image Source="pack://application:,,,/Dual.Framework.UI.WPF;component/Images/magnifier_16.png" Stretch="None" RenderOptions.BitmapScalingMode="NearestNeighbor" RenderOptions.EdgeMode="Aliased" />
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="Common">
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="imageButtonBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#FFFFD34A" Duration="0:00:0.3"/>
                                            <ColorAnimation Storyboard.TargetName="imageButtonBorder" Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#FFFDEFC4" Duration="0:00:0.3"/>
                                            <ColorAnimation Storyboard.TargetName="imageButtonBorder" Storyboard.TargetProperty="BorderBrush.Color" To="#FFFFCC2D" Duration="0:00:0.3" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="imageButtonBorder" Storyboard.TargetProperty="Background.GradientStops[0].Color" To="#FFE5ECF5" Duration="0:00:0.3"/>
                                            <ColorAnimation Storyboard.TargetName="imageButtonBorder" Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#FFEDF1F5" Duration="0:00:0.3"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    Ele precisa de uma imagem, mas te dá uma idéia


    Take a look at WPF FlashMessage

    terça-feira, 23 de outubro de 2012 12:31
  • Joba, meu primo... heheheh

    Cara, estou com o mesmo problema que o nosso amigo Daniel.

    Estou iniciando em WPF. 

    Estou criando um ResourceDicionary, onde tem as propriedades para meus botões. E o que estou querendo fazer é que ao posicionar o mouse sobre o botão, o mesmo fique com a "Opacity" em 50% e com a mesma imagem original. Pois a minha ideia é deixar padrão para todos os botões.

    Tem alguma ideia de como fazer?

    Abraços.

    terça-feira, 23 de outubro de 2012 12:56
  • Por favor, crie uma pergunta separada. Obrigado.

    Take a look at WPF FlashMessage

    terça-feira, 23 de outubro de 2012 13:01
  • Olá novamente.

    Eu modifiquei o meu botão para o seguinte:

    <ResourceDictionary
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    	<Style x:Key="ButtonFocusVisual">
    		<Setter Property="Control.Template">
    			<Setter.Value>
    				<ControlTemplate>
    					<Rectangle Margin="0" SnapsToDevicePixels="true" Stroke="Black" StrokeThickness="0" StrokeDashArray="0 0"/>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    	<!-- Resource dictionary entries should be defined here. -->
    	<SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    	<Style x:Key="buttonmetro" TargetType="{x:Type Button}">
    		<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
    		<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
    		<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
    		<Setter Property="BorderThickness" Value="1"/>
    		<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    		<Setter Property="HorizontalContentAlignment" Value="Center"/>
    		<Setter Property="VerticalContentAlignment" Value="Center"/>
    		<Setter Property="Padding" Value="1"/>
    		<Setter Property="Template">
    			<Setter.Value>
    				<ControlTemplate TargetType="{x:Type Button}">
    					<Image Margin="0,0,0.333,0" Source="entrar.png" Stretch="Fill"/>
    				</ControlTemplate>
    			</Setter.Value>
    		</Setter>
    	</Style>
    </ResourceDictionary>

    Mas vem dando o seguinte erro: 

    The resource "ButtonNormalBackground" could not be resolved

    Na linha:

    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>

    Consegue me ajudar mais uma fez?

    Agradeço desde já.


    terça-feira, 23 de outubro de 2012 14:04
  • Olá novamente.

    Eu modifiquei o meu botão para o seguinte:

    <ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <Style x:Key="ButtonFocusVisual">
    <Setter Property="Control.Template">
    <Setter.Value>
    <ControlTemplate>
    <Rectangle Margin="0" SnapsToDevicePixels="true" Stroke="Black" StrokeThickness="0" StrokeDashArray="0 0"/>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    <!-- Resource dictionary entries should be defined here. -->
    <SolidColorBrush x:Key="ButtonNormalBorder" Color="#FF707070"/>
    <Style x:Key="buttonmetro" TargetType="{x:Type Button}">
    <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
    <Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="{x:Type Button}">
    <Image Margin="0,0,0.333,0" Source="entrar.png" Stretch="Fill"/>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>
    </ResourceDictionary>

    Mas vem dando o seguinte erro: 

    The resource "ButtonNormalBackground" could not be resolved
    Na linha:

    <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>

    Consegue me ajudar mais uma fez?

    Agradeço desde já.
    terça-feira, 23 de outubro de 2012 14:05
  • Cara, você tem que definir os Resources antes de usá-los... "ButtonNormalBackground" não está definido, por isso o erro... um exemplo de definição:

    <LinearGradientBrush x:Key="ButtonNormalBackground" EndPoint="0,1" StartPoint="0,0">
            <GradientStop Color="#F3F3F3" Offset="0"/>
            <GradientStop Color="#EBEBEB" Offset="0.5"/>
            <GradientStop Color="#DDDDDD" Offset="0.5"/>
            <GradientStop Color="#CDCDCD" Offset="1"/>
    </LinearGradientBrush>


    Take a look at WPF FlashMessage

    terça-feira, 23 de outubro de 2012 15:41
  • Daniel,

    Eu consegui fazer deste modo, vê se supre as necessidades:

        <Style x:Key="EstiloBotoes" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" 
                                BorderThickness="1"
                                BorderBrush="DarkGray" 
                                CornerRadius="3" 
                                Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                                <Setter Property="Opacity" Value="0.5" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                                <Setter Property="Opacity" Value="0.3" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    Não sei se é bem o que tu quer...

    terça-feira, 23 de outubro de 2012 17:15