WPF - Botão

Question

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.

Answer 1

opa, posta o XAML que você usou aqui que fica mais fácil te ajudar.

Answer 2

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

Answer 3

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.

Answer 4

Por favor, crie uma pergunta separada. Obrigado.

---

Take a look at WPF FlashMessage

Answer 5

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á.

Answer 6

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á.

Answer 7

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

Answer 8

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