Custom Button doesn't show its content properly - c#

Okay, I made a Custom Button in my .xaml file in my WPF Project, I've done everything, but the Content isn't showing... The C# code is default, nothing changed, but here's my .xaml code:
<Button Name="TestButton" Content="TESTING" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="197,158,0,0" Height="30" Width="120">
<Button.Template>
<ControlTemplate>
<Image Height="30" Width="120" Stretch="Fill">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Resources/btn_primary_normal.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="/Resources/btn_primary_hover.png"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="/Resources/btn_primary_disabled.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</ControlTemplate>
</Button.Template>
</Button>


When you replace the ControlTemplate of a control you replace all of its visual functionality, including the part that displays the Content property. If you want a button that shows an image and whatever is in the Content property you are pretty close, just add a ContentPresenter into your template like so:
<Button Name="TestButton" Content="TESTING" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="197,158,0,0" Height="30" Width="120">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Height="30" Width="120" Stretch="Fill">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="/Resources/btn_primary_normal.png"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="/Resources/btn_primary_hover.png"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="/Resources/btn_primary_disabled.png"/>
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
Also note the specification of the TargetType in the ControlTemplate, this is important.

Related

Change control background when mouse is over it

I have found different pieces of codes that are supposed to change the background of a control when the mouse hovers it. I haven't been able to make any of them work. This is the piece of code that I'm using right now. I don't know what I'm missing, I'm specifying everything.
<Window.Resources>
<Style x:Key="HoverButton" TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFA9DE4E"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
Im also specifying the Style I want to apply to the specific control, in this case is a button.
<!-- Start button -->
<Button x:Name="btnStart" Style="{StaticResource HoverButton}" Content="Start" Margin="503,411,10,10" FontWeight="Bold" BorderBrush="#FFA9DE4E" Click="BtnNext_Click" Foreground="#FFA9DE4E" Background="#FF222831">
<Button.Effect>
<DropShadowEffect Color="#FFA9DE4E" ShadowDepth="1" BlurRadius="20" Direction="320"/>
</Button.Effect>
</Button>
When I hover the button nothing changes.

Try to modify the button template like this:
<Button Content="Button" HorizontalAlignment="Center" Click="Button_Click" VerticalAlignment="Center" Width="75">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="bdr_main" BorderThickness="1" BorderBrush="Black" Background="LightGray">
<ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="bdr_main" Property="Background" Value="#FFA9DE4E"/>
</Trigger>
//You can also change the color at the click like this:
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="bdr_main" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
By modifying the template, you can stylize your button as you wish.
Hoping to help you.

Defining template and style together within the button

I have WPF button below:
<Button Name="btnAdd" Click="btnAdd_Click">
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Vertical">
<Image Height="20" Width="20" Stretch="UniformToFill" Source="./Resources/Add.png"/>
<Label HorizontalAlignment="Center">Add</Label>
</StackPanel>
</ControlTemplate>
</Button.Template>
</Button>
Now within the wpf button I am trying to add the following style, I mean, combining style with template in the button:
<Button>
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource MyStyle}">
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
How can I do this?

One way could be adding a Setter to your Style for Template property. Like this:
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource MyStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel Orientation="Vertical">
<Image Height="20" Width="20" Stretch="UniformToFill" Source="./Resources/Add.png"/>
<Label HorizontalAlignment="Center">Add</Label>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Green" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>

Button over Button has a different color

I have two buttons. Its the same grafic on both. But if i place one button on the other button, the button on top will be a little more brighter.
<Button x:Name="btnMenue1" HorizontalAlignment="Left" Margin="10,0,0,360" Width="625" Click="btnMenue1_Click" VerticalAlignment="Bottom" FontWeight="Bold" FontSize="36" Foreground="White" Height="340" RenderTransformOrigin="0.497,0.503" Background="#FFCBCAC8" BorderBrush="#FF0F0F11" IsEnabled="False">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Green"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Opacity" Value="0.5" TargetName="Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
<DataTrigger Binding="{Binding ElementName=btnMenue1Text, Path=IsPressed}" Value="True">
<Setter Property="Opacity" Value="0.5" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="btnMenue1Text" HorizontalAlignment="Left" Margin="15,0,0,650" Width="310" Click="btnMenue1_Click" VerticalAlignment="Bottom" FontSize="36" Foreground="White" Height="50" RenderTransformOrigin="0.497,0.503" Background="{x:Null}" BorderBrush="{x:Null}" IsEnabled="False">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="Border" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Opacity" Value="0.5" TargetName="Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
<TextBlock x:Name="tbMenue1" Foreground="White" FontSize="36" Text="Menue1" VerticalAlignment="Top" Height="50" HorizontalAlignment="Left" FontFamily="Segoe UI Light" FontWeight="Bold" Width="290" />
</Button>
Picture if button is over button
Picture if button is not over button

Don't use Opacity for color blending.
So if you want something like a maroon color, use a maroon color, not a half-transparent red element on a black background.
(To hack around the hack you could add a completely black element below your transparent overlaying element. Don't do this.)

WPF: How to change canvas of a button on press?

I am new to XAML and WPF.
On Button press I want to change the canvas drawn on the button from ic_maximize to ic_restore and switch the canvas when the button is pressed again. I am using the mahapps library. Can you please tell me how to go about doing this?
I have tried a lot of different StackOverflow links, but none of them are pertinent to my problem.
Here is the style for my maximize button. I have the "IsPressed" triggers ready but not able to figure out what need to be set when it is triggered.-
<Canvas x:Key="ic_maximize" Width="13.3333" Height="13.3333" Canvas.Left="0" Canvas.Top="0">
<Rectangle Width="11.7333" Height="11.7333" Canvas.Left="2.136" Canvas.Top="-0.536002" Stretch="Fill" StrokeThickness="1.06667" StrokeLineJoin="Round" Stroke="#FF999999"/>
<Rectangle Width="11.7333" Height="11.7333" Canvas.Left="5.36442e-007" Canvas.Top="1.6" Stretch="Fill" StrokeThickness="1.06667" StrokeLineJoin="Round" Stroke="#FF999999" Fill="#FF161616"/>
</Canvas>
<Canvas x:Key="ic_restore" Width="12" Height="12" Canvas.Left="0" Canvas.Top="0">
<Rectangle Width="11.7333" Height="11.7333" Canvas.Left="5.36442e-007" Canvas.Top="0.266666" Stretch="Fill" StrokeThickness="1.06667" StrokeLineJoin="Round" Stroke="#FF999999"/>
</Canvas>
<Style x:Key="ExtendedMaxButtonStyle"
TargetType="{x:Type Button}"
BasedOn="{StaticResource MetroWindowButtonStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Name="grid" Background="{StaticResource MaxButton.Grid.background}">
<!-- either one of the ic_maximize/ic_restore canvases should come here -->
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="grid" Property="Background" Value="{StaticResource MaxButton.MouseOver.Background}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<!-- What should I write here?-->
</Trigger>
<Trigger Property="IsPressed" Value="False">
<!-- What should I write here?-->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Place both Canvas on top of each other, and hide one upon IsPressed.
<Grid Name="grid">
<Canvas Background="Purple">
<Canvas.Style>
<Style TargetType="Canvas">
<Style.Triggers>
<DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="True">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Canvas.Style>
<TextBlock Text="ic_max" FontSize="48"/>
</Canvas>
<Canvas Background="Green">
<Canvas.Style>
<Style TargetType="Canvas">
<Style.Triggers>
<DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource Mode=TemplatedParent}}" Value="False">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Canvas.Style>
<TextBlock Text="ic_restore" FontSize="48"/>
</Canvas>
</Grid>

Change Image source inside a Button template

I have a button in WPF application. I am presenting an image instead of a button.
When my app comes up , all the controls are disabled , until a user logs in. I want my app to start with button that it's image is gray-->disabled . and when someone logged in , i want to change to color image.but i can't access the image in the button's template. can anyone help? thank you.
the code of my button -
<Button Height="55" Background="CornflowerBlue" Foreground="White" FontWeight="Normal" Name="Button_Cancel" FontSize="12" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="55" Click="Button_Cancel_Click">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel >
<Image Source="Images/myImage.png" Name="Image_Cancel"/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Button.BitmapEffect" >
<Setter.Value>
<DropShadowBitmapEffect Color="LightGray" Direction="300" ShadowDepth="5" >
</DropShadowBitmapEffect>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Button.RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="0.970" ScaleY="0.970">
</ScaleTransform>
<!--<SkewTransform AngleY="2" CenterY="-100"/>-->
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>

You can hook up the image with the IsEnabled property via trigger, then you probably don't need code behind access.
<Image>
<Image.Style>
<Style TargetType="{x:Type Image}">
<Setter Property="Source" Value="Images/Image_Normal.png" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="Images/Image_Disabled" />
</Trigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>

You can do this..
<StackPanel >
<Image x:name="MyImage" Source="Images/myImage.png" Name="Image_Cancel"/>
</StackPanel>
and when you want to to access the image or modify it
<Setter Property = "Source" TargetName = "MyImage" value = "something"/>

Categories

Resources