I try to do it next way:
<ToolBar x:Name="toolBar" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0">
<Button BorderBrush="Black" Content="READ" Click="Button_Click_1"/>
<ToolBar.Resources>
<Style x:Key="ToolBarMainPanelBorderStyle" TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0,0,0,0"/>
</Style>
</ToolBar.Resources>
</ToolBar>
It doesn't work. I don't want to change style of whole ToolBar using template. How to do it?
It can be achieved by putting your Toolbar inside the ToolBarTray as follow,
<ToolBarTray>
<ToolBar x:Name="toolBar" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0">
<Button BorderBrush="Black" Content="READ" Click="Button_Click_1"/>
<ToolBar.Resources>
<Style x:Key="ToolBarMainPanelBorderStyle" TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="0,0,0,0"/>
</Style>
</ToolBar.Resources>
</ToolBar>
</ToolBarTray>
Related
I have a button with the following properties:
<Grid Margin="0,0,593,0">
<Button x:Name="btnToolbarClose" Content="X" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontSize="12" FontFamily="Arial" Height="23" Width="30" Margin="0,-1,-1,0"/>
<Button x:Name="btnToolbarMax" Content="£" Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Grid.Column="1" HorizontalAlignment="Right" Margin="0,-1,29,0" VerticalAlignment="Top" FontFamily="Wingdings 2" VerticalContentAlignment="Center" FontSize="12" Height="23" Width="30" />
<Button x:Name="btnToolbarMin" Content="─" Grid.Column="1" HorizontalAlignment="Right" Margin="0,-1,59,0" VerticalAlignment="Top" VerticalContentAlignment="Bottom" HorizontalContentAlignment="Center" FontSize="14" Height="23" Width="30" >
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="{x:Null}"/>
<Setter Property="BorderBrush" Value="{x:Null}"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</Grid>
And now I want that I don't have to insert this button style for each button, but simply use this style for the other buttons with bindings?So that I only have to write this style once and use it for the other buttons?
An easy way to reuse styles of WPF controls is by using ResourceDictionaries.
Link to MSDN
After adding a ResourceDictionary to your project, you can reference it by adding it to the start of your XAML like this:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="./YourNewDictionary.xaml"/> // This points to the location of your dictionary.
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
You can define your custom style in your newly added ResourceDictionary somewhat like this:
<Style x:Key="YourButtonStyle" TargetType="Button">
<Setter Property="Margin" Value="5"/>
And all other customized properties....
</Style>
You can then reference your custom style in your control like this:
<Button x:Name="YourButton" Style="{StaticResource YourButtonStyle}">
This lets you easily create custom styles wich you can reuse throughout your project without much clutter in your XAML files.
In my WPF app, the following XAML in Toolbar is showing ToolTip for Paste button but not for the Copy button. Question: Why it may be happening and how can we resolve it?
<Window x:Class="myWPFApp.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:WpfMkTxTest"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="1140.038">
<Grid>
<!-- Set the styles for the tool bar. -->
<Grid.Resources>
<Style TargetType="{x:Type Button}" x:Key="formatTextStyle">
<Setter Property="FontFamily" Value="Palatino Linotype"></Setter>
<Setter Property="Width" Value="30"></Setter>
<Setter Property="FontSize" Value ="14"></Setter>
<Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>
</Style>
<Style TargetType="{x:Type Button}" x:Key="formatImageStyle">
<Setter Property="Width" Value="30"></Setter>
<Setter Property="CommandTarget" Value="{Binding ElementName=mainRTB}"></Setter>
</Style>
<Style TargetType="{x:Type RichTextBox}">
<Setter Property="FontFamily" Value="calibri (body)" />
<Setter Property="FontSize" Value="11" />
</Style>
<Style TargetType="{x:Type Paragraph}">
<Setter Property="Margin" Value="0" />
</Style>
</Grid.Resources>
<DockPanel Name="mainPanel">
<!-- This tool bar contains all the editing buttons. -->
<ToolBar Name="mainToolBar" Height="30" DockPanel.Dock="Top">
....
<Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Copy" ToolTip="Copy">
<Image Source="Images\editcopy.png"></Image>
</Button>
<Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Paste" ToolTip="Paste">
<Image Source="Images\editpaste.png"></Image>
</Button>
....
</DockPanel>
</Grid>
</Window>
To show tooltip for command binding buttons, set ToolTipService.ShowOnDisabled = "True"
<DockPanel Name="mainPanel" VerticalAlignment="Top">
<ToolBar Name="mainToolBar" Height="30" DockPanel.Dock="Top">
<Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Copy" ToolTip="Copy" ToolTipService.ShowOnDisabled="True">
<Image Source="C:\Users\mcpl\Documents\Visual Studio 2015\Projects\TestApplication\TestApplication\Images\Add.png"></Image>
</Button>
<Button Style="{StaticResource formatImageStyle}" Command="ApplicationCommands.Paste" ToolTip="Paste" ToolTipService.ShowOnDisabled="True">
<Image Source="C:\Users\mcpl\Documents\Visual Studio 2015\Projects\TestApplication\TestApplication\Images\edit.png"></Image>
</Button>
</ToolBar>
Try using CommandBinding
<ToolBar Name="mainToolBar" Height="30" DockPanel.Dock="Top">
<Button Style="{StaticResource formatImageStyle}" ToolTip="Copy">
<Button.CommandBindings>
<CommandBinding Command="ApplicationCommands.Copy" />
</Button.CommandBindings>
<Image Source="C:\Users\heruvath\Desktop\user-48.png"></Image>
</Button>
<Button Style="{StaticResource formatImageStyle}" ToolTip="Paste">
<Button.CommandBindings>
<CommandBinding Command="ApplicationCommands.Paste" />
</Button.CommandBindings>
<Image Source="C:\Users\heruvath\Desktop\user-48.png"></Image>
</Button>
</ToolBar>
In a custom control I have as the content a stackpanel (horizontal) en in it, a Textblock and a Button.
The custom control works and the result is a rectangle which is my local:DropDownToggleButton.
This reactangle is divided into two sub-rectangles: on to the left is just the <TextBlock Text="Test"part and to the right is the button <Button x:Name="ButtonTest which is stretched to fill the height of the rectangle.
However when I click in the upper-right part of the rectangle, the local:DropDownToggleButton itself receives the event and not the button that is also present there. It is as if the Button only responds to mouse events received by the Textblock in the content of the button. How can I make the whole area of the button responsive to mouse clicks?
The custom control reacts on the Clicked or PreviewMouseDown event of the button. Both events have the same problem. Also adding Panel.ZIndex="1"doesn't help.
<local:DropDownToggleButton ToolTip="Show" DropDownButton="{Binding ElementName=ButtonTest}"
VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" Padding="0" BorderThickness="0"
Style="{StaticResource {x:Static ToolBar.ToggleButtonStyleKey}}">
<local:DropDownToggleButton.DropDownMenu>
<ContextMenu>
<ContextMenu.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Background="WhiteSmoke"></StackPanel>
</ItemsPanelTemplate>
</ContextMenu.ItemsPanel>
<ContextMenu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<TextBlock Padding="6" Text="{TemplateBinding Header}" Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="0"/>
<Style.Triggers>
<Trigger Property="TextBlock.IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource mouseover}"/>
</Trigger>
</Style.Triggers>
</Style>
</ContextMenu.ItemContainerStyle>
<MenuItem Header="Test 1" />
<MenuItem Header="Test 2"/>
</ContextMenu>
</local:DropDownToggleButton.DropDownMenu>
<StackPanel Orientation="Horizontal" VerticalAlignment="Stretch">
<TextBlock Text="Test" VerticalAlignment="Center"/>
<Button x:Name="ButtonTest" ToolTip="Other" Padding="0" Margin="0" VerticalContentAlignment="Stretch" VerticalAlignment="Stretch">
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter/>
</ControlTemplate>
</Button.Template>
<TextBlock FontSize="16" FontFamily="Marlett" Text="6" VerticalAlignment="Center" />
</Button>
</StackPanel>
</local:DropDownToggleButton>
The reason the button does not react is because you have taken away most of what you would expect a button to have, your button template is just the ContentPresenter, so the button is literally only the textblock. Try
<ControlTemplate TargetType="Button">
<Border Background="Transparent">
<ContentPresenter/>
</Border>
</ControlTemplate>
How can we display Vertical radio button in horizontally manner in WPF
I am working on a WPF project and I am using this code to create a list box radio group which is bind with my Data Srouce.
I have used below code to create a listbox with radio button and bind it with my datasource
Code :
`<Window.Resources>
<Style x:Key="radioListBox" TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5" />
<Setter Property="DisplayMemberPath" Value="Text" />
<Setter Property="SelectedValuePath" Value="Value" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="Transparent">
<RadioButton Focusable="False" Margin="5,5,5,5" IsHitTestVisible="False" IsChecked="{TemplateBinding IsSelected}">
<ContentPresenter />
</RadioButton>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DockPanel>
<!-- StatusBar just to make sure two-way binding is working properly -->
<StatusBar DockPanel.Dock="Bottom" BorderBrush="Black" BorderThickness="0,1,0,0">
<TextBlock Text="{Binding CurrentChild.Details}" TextWrapping="Wrap" />
</StatusBar>
<!-- Details pane -->
<Border Margin="5" BorderBrush="LightGray" BorderThickness="1">
<Grid>
<Grid.Resources>
<!-- Common style for header labels -->
<Style TargetType="Label">
<Setter Property="HorizontalAlignment" Value="Right" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Margin" Value="5,2" />
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="104" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="27" />
<RowDefinition Height="Auto" MinHeight="27" />
</Grid.RowDefinitions>
<Label Grid.Row="3" Content="My Sample Numbers:" />
<ListBox Grid.Row="3" Grid.Column="1" Style="{StaticResource radioListBox}"
ItemsSource="{Binding MyNumberTypes}" Height="Auto" Margin="5,4,5,0" VerticalAlignment="Top" />
</Grid>
</Border>
</DockPanel>`
public IEnumerable<ValueAndText<NumType>> MyNumberTypes
{
get
{
yield return new ValueAndText<NumType>(NumType.One, "One");
yield return new ValueAndText<NumType>(NumType.Two, "Two");
yield return new ValueAndText<NumType>(NumType.Three, "Three");
yield return new ValueAndText<NumType>(NumType.Four, "Four");
yield return new ValueAndText<NumType>(NumType.Five, "Five");
yield return new ValueAndText<NumType>(NumType.Six, "Six");
yield return new ValueAndText<NumType>(NumType.Seven, "Seven");
yield return new ValueAndText<NumType>(NumType.Eight, "Eight");
yield return new ValueAndText<NumType>(NumType.Nine, "Nine");
}
}`
Every thing is working fine but the problem is I need all radio button to display in zig zag style. Since my form does not have much space to accommodate the radio buttons vertically so is there any way I can display these radio button in a way it can be displayed horizontally?
for example (cant post image)
One Two Three
Four Five Six
Seven Eight Nine
You can style your ItemsPanel in your Listbox Style. Add to radioListBox style:
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Columns="3" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
to display radiobuttons in a grid of 3 columns. Using ItemsPanel you can change the container in which yours items are displayed.
I have a style for an image button as the following, how could I make the Text of the TextBlock, where equals "POSITION' below, the same as the Content of the button? Thanks.`
<Style x:Key="TopButtonStyle" TargetType="Button">
<Setter Property="Padding" Value="0"/>
<Setter Property="Button.BorderBrush" Value="SteelBlue" />
<Setter Property="Button.BorderThickness" Value="0" />
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid Background="SteelBlue">
<Image Source="images/blue_button_up.png" HorizontalAlignment="Center" Margin="0,0,0,0" Height="Auto" Width="Auto" Stretch="UniformToFill"/>
<TextBlock Text="POSITION" HorizontalAlignment="Center" Foreground="White" Margin="5,5,0,0"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>`
{Binding} because the DataContext in the ContentTemplate is the Content.