I was looking over internet for an arrow shaped button. I found this solution:
<Button HorizontalAlignment="Center" Click="Button_Click">
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<StackPanel Orientation="Horizontal">
<Rectangle Width="100" Height="25" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
<Polygon Points= "0,0 30,25, 0,50" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
</StackPanel>
<ContentPresenter HorizontalAlignment="Left" Margin="45,0,0,0" VerticalAlignment="Center" Content="Login"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
The problem with this is that, while this is a button that can be clicked, i "lost" the button click effect (i.e the effect that you have when you press the button). Do you know if there is a way to solve my problem?
You need to define this effect yourself in your custom template.
Add an IsPressed trigger that changes some properties of the elements in your template:
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<StackPanel Orientation="Horizontal">
<Rectangle x:Name="rect" Width="100" Height="25" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
<Polygon x:Name="pol" Points= "0,0 30,25, 0,50" Stroke="Orange" Fill="Orange" VerticalAlignment="Center"/>
</StackPanel>
<ContentPresenter HorizontalAlignment="Left" Margin="45,0,0,0" VerticalAlignment="Center" Content="Login"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="rect" Value="Red"/>
<Setter Property="Fill" TargetName="pol" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
Related
I am trying to make a costume button in c# wpf. I used material design themes for inserting an icon inside the button but when I run the program, only the icon inside the button is click able not the whole button. what should I do to fix this?
I did this for button style:
<Application.Resources>
<Style x:Key="MyButton" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="border" BorderThickness="0" Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter Property="Opacity" Value="0.8" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
here is the button:
<Button x:Name="btnClose" Style="{StaticResource MyButton}" Width="30" Height="30" Padding="0" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="Gray" Margin="10 0" Click="btnClose_Click">
<materialDesign:PackIcon Kind="Power" Height="30" Width="30"></materialDesign:PackIcon>
</Button>
Set the Background property to a Brush like for example Transparent instead of setting it to {x:Null}:
<Button x:Name="btnClose" Style="{StaticResource MyButton}" Width="30" Height="30" Padding="0"
Background="Transparent" BorderBrush="{x:Null}" Foreground="Gray" Margin="10 0" Click="btnClose_Click">
<materialDesign:PackIcon Kind="Power" Height="30" Width="30"></materialDesign:PackIcon>
</Button>
I'm using C# WPF Application
I need your help.
If I press on a button it should be selected, but if I now press on another button it should be selected and the other button should not be selected.
It should show where the user is.The button should be selected until another button has been clicked.
But when you go with the mouse over, the normal mouse over effect should come.
<Window x:Name="windowsForm" x:Class="Vorschau.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Vorschau"
mc:Ignorable="d"
Title="Vorschaukomponente" Height="514.583" Width="805.208" FontFamily="Century Gothic" WindowStartupLocation="Manual" BorderThickness="0" ResizeMode="NoResize" WindowStyle="None" Icon="C:\Users\user\Documents\Visual Studio 2015\Projects\Vorschau\Vorschau\img\coordinates.ico" Background="{x:Null}" AllowsTransparency="True">
<Window.Resources>
<Style x:Key="border_res" TargetType="{x:Type Border}">
<Setter Property="Background" Value="#3A3A3B" />
<Setter Property="CornerRadius" Value="10" />
</Style>
</Window.Resources>
<Border Style="{StaticResource border_res}">
<Grid>
<Canvas HorizontalAlignment="Left" Height="60" VerticalAlignment="Top" Width="185" Background="#FFE57E31">
<Canvas Height="64" Canvas.Top="451" Width="185" Background="#FF2C373F">
<Label x:Name="lbCopyright" Content="© Name 2017" Canvas.Left="10" Canvas.Top="29" Width="121" Foreground="#FF1B1D1F"/>
</Canvas>
<Canvas Height="391" Canvas.Top="60" Width="185" Background="#FF37424A">
<Button x:Name="btVorschau" Content="Vorschau" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="185" Height="50" Foreground="LightGray" FontSize="16"
HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Click="Button_Click">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF37424A"/>
<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="Background" Value="#FF303B43"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button x:Name="btEinstellung" Content="Einstellung" HorizontalAlignment="Left" VerticalAlignment="Bottom" Width="185" Height="50" Foreground="LightGray" FontSize="16"
HorizontalContentAlignment="Left" BorderBrush="{x:Null}" Canvas.Top="50" Click="btEinstellung_Click">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="#FF37424A"/>
<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="Background" Value="#FF303B43"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Canvas>
<Canvas Height="60" Canvas.Left="185" Width="618" Background="#FFEEE9ED">
<Label x:Name="lbClose" Content="X" Canvas.Left="578" FontSize="20" MouseDoubleClick="lbClose_MouseDoubleClick"/>
<Label x:Name="lbMinimize" Content="-" Canvas.Left="556" FontSize="22" Canvas.Top="-2" MouseDoubleClick="lbMinimize_MouseDoubleClick"/>
<Label x:Name="lbWhereIAm" Content="Label" Canvas.Left="10" Canvas.Top="15" Width="162" FontSize="20"/>
</Canvas>
<Canvas x:Name="canvasContent" Height="455" Canvas.Left="185" Canvas.Top="60" Width="618" Background="#FFD1CFD0">
<TabControl x:Name="tabControl" Height="241" Canvas.Left="93" Canvas.Top="87" Width="440" SelectedIndex="0" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<TabItem x:Name="tabitem1" Header="TabItem">
<Grid Background="#FFE5E5E5">
<Label x:Name="label1" Content="Label" HorizontalAlignment="Left" Margin="99,95,0,0" VerticalAlignment="Top" Background="#FF2387FF"/>
</Grid>
</TabItem>
<TabItem x:Name="tabitem2" Header="TabItem" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<Grid Background="#FFE5E5E5">
<Label x:Name="label" Content="Label" HorizontalAlignment="Left" Margin="138,124,0,0" VerticalAlignment="Top" Background="#FFF70000"/>
</Grid>
</TabItem>
</TabControl>
</Canvas>
<Image x:Name="image" Height="38" Canvas.Left="10" Canvas.Top="10" Width="38" Source="C:\Users\user\Documents\Visual Studio 2015\Projects\Vorschau\Vorschau\img\coordinatesWhite.png"/>
<Label x:Name="lbLogoname" Content="Vorschaukomponente" Canvas.Left="37" Canvas.Top="10" Width="143" FontWeight="Bold" Foreground="White"/>
</Canvas>
</Grid>
</Border>
</Window>
you can use Listbox , to show group of buttons
Solution 1 :
<Style TargetType="{x:Type ListBox}">
<Setter Property="ListBox.ItemTemplate">
<Setter.Value>
<DataTemplate>
<ToggleButton Content="{Binding}"
IsChecked="{Binding IsSelected, Mode=TwoWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}}"
/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Solution 2
Use radio button change the template
<RadioButton Content="Point" >
<RadioButton.Template>
<ControlTemplate>
<ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"/>
</ControlTemplate>
</RadioButton.Template>
</RadioButton>
I am trying to change the TextBlock text colour whenever the Button is highlighted.
However, I don't know how to bind the ControlTemplate.Trigger to the TextBlock Foreground. I tried giving the TextBlock a Name and then using TargetName in Setter but it said that the name wasn't recognised.
<Button Name="Home" HorizontalAlignment="Left" Width="75" Click="Button_Click_Home" Background="#FF252525" BorderThickness="5">
<Button.Content>
<Grid HorizontalAlignment="Center" VerticalAlignment="Bottom">
<TextBlock FontFamily="/VideoManager;component/#Myriad Pro" FontSize="13.333" Foreground="White" Text="Home"></TextBlock>
</Grid>
</Button.Content>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="#FF360A0A" /> // What to put here..
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
this is going to help you, but it has a lot of loss, so i suggest to you to read more about Styles And Templates
<Button Name="Home" HorizontalAlignment="Left" Width="75" Background="#FF252525" BorderThickness="5">
<Button.Content>
<Grid HorizontalAlignment="Center" VerticalAlignment="Bottom">
<TextBlock FontFamily="/VideoManager;component/#Myriad Pro" FontSize="13.333" Text="Home"></TextBlock>
</Grid>
</Button.Content>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Yellow" />
<Setter Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
I have a label over Button control now i want hover effect on label but i want to disable click event on label.
So here is the summary of problem.
1.Label is placed over Button.
2.I want click event of button not for Label.
3.Setting IsHitTestVisible="False" of label disbales the click as well as mouse over effect.
4.So,Now i want to disable click in label but not the mouse over effect.
Here is the code
<Button Content="OK" Height="25" IsDefault="true" HorizontalAlignment="Left" Name="okButton"
VerticalAlignment="Top" Width="56" Click="Ok_button" Visibility="Visible" OpacityMask="#00000000"
Margin="-2,-3,0,0" IsTabStop="False" />
<Label Content="OK" Height="24" HorizontalAlignment="Left" Name="OKLabel" VerticalAlignment="Top"
Width="141" FontSize="10" FontFamily="Arial" FontWeight="Bold" BorderBrush="Black"
BorderThickness="0" OpacityMask="Black" Foreground="White" Focusable="False" Style="{StaticResource oklabel}" IsEnabled="True" IsHitTestVisible="False">
</Label>
<Window.Resources>
<Style TargetType="{x:Type Label}" x:Key="oklabel">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" ShadowDepth="0" Opacity="1" Color="White"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
I have added a Arrow to Indicate the TextBox from ToolTip. This Works great when the TextBox is far away from the Screen Edge. But When it is near the Screen edge. The ToolTip Placement changes and the Arrow is shown on Left.
Here is the Image
Correct as expected, since TextBox in away from edges.
But when TextBox is near to edges. I see this
I want to see the Arrow in the second image on the right side of tooltip.
Here is the code
<Grid Grid.Column="0" Width="10"
Margin="1,0,-1,0"
Background="Transparent">
<Path Height="15" Stretch="Fill"
Fill="{DynamicResource ControlsValidationBrush}"
Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
</Grid>
<Border Grid.Column="1"
Background="{DynamicResource ControlsValidationBrush}"
CornerRadius="0">
<TextBlock MaxWidth="250"
Margin="8,7,8,7"
Foreground="{DynamicResource WhiteBrush}"
Text="{Binding (Validation.Errors)[0].ErrorContent}"
TextWrapping="Wrap"
UseLayoutRounding="false" />
</Border>
I created the Controltemplate for the tooltip and show/hide right or left arrow depending on the placement of the tooltip. Here is the Xaml for it:
<ControlTemplate x:Key="tooltipTemplate" TargetType="{x:Type ToolTip}">
<StackPanel Orientation="Horizontal">
<Grid x:Name="LeftGrid"
Width="10"
Margin="1,0,-1,0"
Background="Transparent">
<Path Height="15" Stretch="Fill"
Fill="Red"
Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
</Grid>
<Border
Background="Red"
CornerRadius="0">
<TextBlock MaxWidth="250"
Margin="8,7,8,7"
Foreground="{DynamicResource WhiteBrush}"
Text="This is tooltip"
TextWrapping="Wrap"
UseLayoutRounding="false" />
</Border>
<Grid x:Name="RightGrid" Width="10"
Margin="1,0,-1,0"
Background="Transparent">
<Path Height="15" Stretch="Fill"
Fill="Red"
Data="F1 M 287.328,237.333L 319.344,255.818L 319.344,218.849L 287.328,237.333 Z " />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="Placement" Value="Left">
<Setter TargetName="LeftGrid" Property="Visibility" Value="Hidden"/>
<Setter TargetName="RightGrid" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="Placement" Value="Right">
<Setter TargetName="LeftGrid" Property="Visibility" Value="Visible"/>
<Setter TargetName="RightGrid" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ToolTip x:Key="myToolTip" Template="{StaticResource tooltipTemplate}">
Thanks