I want this type, which I created in a XAML file, of button to be a style in the App.XAML.
<Button Width="25" Height="25" ToolTip="Add" Command="{Binding CanAdd}" Padding="0">
<Rectangle Width="15" Height="15">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_add}"/>
</Rectangle.Fill>
</Rectangle>
</Button>
Updated my code on the answer of #Ash, which doesn't give me any errors but the button stays blank.
In my App.XAML I have this:
<VisualBrush x:Key="Add"
Visual="{StaticResource appbar_add}" />
<!--Button Add-->
<Style TargetType="Button"
x:Key="AddButton"
BasedOn="{StaticResource SmallButton}">
<Setter Property="ToolTip"
Value="Add" />
<Style.Resources>
<Style TargetType="Rectangle">
<Setter Property="Fill"
Value="{StaticResource Add}">
</Setter>
</Style>
</Style.Resources>
</Style>
if there is a Visual with appbar_add key in Resources, declare a VisualBrush using that Visual and use brush everywhere:
<Window.Resources>
<Border x:Key="appbar_add">
<TextBlock Text="+"/>
</Border>
<VisualBrush x:Key="appbar_addBrush"
Visual="{StaticResource appbar_add}"/>
</Window.Resources>
<Rectangle Width="15" Height="15"
Fill="{StaticResource appbar_addBrush}"/>
Related
I have found a workaround by using unicode instead of ImageAwesome but I would much rather not have to look up all of the icons' unicode of all of the font awesome icons I am using in my program.
The font awesome package I am using is: https://github.com/MartinTopfstedt/FontAwesome5
Here's a snippet of my button style:
<Style TargetType="{x:Type Button}" x:Key="ButtonStyle">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="1" CornerRadius="4">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource PrimClr}" />
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource SecClr}" Opacity="0.8"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource SecClr}" />
</Setter.Value>
</Setter>
<Setter Property="TextBlock.FontWeight" Value="Bold"/>
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource PrimClr}" Opacity="0.8" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextBlock.FontStyle" Value="Italic"/>
<Setter Property="Foreground" Value="DarkGray"/>
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Gray" Opacity="0.3"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Here's the example of how I use a button in my program:
<Button x:Name="SubmitBtn" Grid.Column="1" Grid.Row="14" Grid.ColumnSpan="2" Width="200" Height="45" FontSize="24" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center"
Style="{StaticResource ButtonStyle}" Click="SubmitBtn_Click">
<StackPanel Orientation="Horizontal">
<fa5:ImageAwesome Icon="Solid_UserCheck" Foreground="GhostWhite" Height="24" Width="24" Margin="0,0,10,0" />
<TextBlock Text="Save Player"/>
</StackPanel>
</Button>
Please note: not putting a color for foreground results in the default black color, I at least want something to show in the mean time.
The color of the ImageAwesome does not take the styles from the button style like the textblock does... I want to be able to make it do so but I cannot find an answer anywhere! Any help would be appreciated.
Also, here's the workaround I found and I hope its not the only solution...
<Button x:Name="SubmitBtn" Grid.Column="1" Grid.Row="12" Grid.ColumnSpan="4" Width="200" Height="40" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="/FontAwesome.Sharp;component/fonts/#Font Awesome 5 Free Solid" Text="" FontSize="24" Margin="0,0,10,0" TextAlignment="Center" VerticalAlignment="Center" />
<TextBlock Text="Submit" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</Button>
I found the solution. I should have been using FontAwesome instead of ImageAwesome.
<Button x:Name="SubmitBtn" Grid.Column="1" Grid.Row="14" Grid.ColumnSpan="2" Width="200" Height="45" FontSize="24" FontWeight="SemiBold" HorizontalAlignment="Center" VerticalAlignment="Center"
Style="{StaticResource ButtonStyle}" Click="SubmitBtn_Click">
<StackPanel Orientation="Horizontal">
<fa5:FontAwesome Icon="Solid_UserCheck" FontSize="24" Margin="0,0,10,0" />
<TextBlock Text="Save Player"/>
</StackPanel>
</Button>
The only problem, and its not a big deal, in the designer it shows as a square.. so I just have to make sure I'm choosing the correct icon.
I'm creating a custom tab control and the tabs were working fine, but when I click a button in my toolbar, the selected tab disappears.
How do I get the selected tab to remain Visible until the next tab is selected?
How do I bind the Visibility of the selected tab with the Visibility of it's corresponding toolbar and DataGrid? (Example: If I click on Tab2, I want Tab2Tools and dgTab2 to become Visible, and all other TabTools and DataGrids to be Hidden or Collapsed.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Color x:Key="TabGradientTop">#FFFFFFFF</Color>
<Color x:Key="TabGradientBottom">#FFC0CBE8</Color>
<SolidColorBrush x:Key="TabBarText" Color="#FF353C66"/>
<SolidColorBrush x:Key="TabBarTop" Color="#FFFFFFFF"/>
<SolidColorBrush x:Key="TabBarBottom" Color="#FFC0CBE8"/>
<SolidColorBrush x:Key="TabBarBorder" Color="#FF8E96AC"/>
<SolidColorBrush x:Key="TabMou5eOverColor" Color="#FFFFB700"/>
<Style x:Key="TabStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource TabBarText}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="TabNormal" Fill="Transparent"/>
<Rectangle x:Name="TabMou5eOver" Fill="{StaticResource TabBarBottom}" Height="30" Stroke="{StaticResource TabMou5eOverColor}" StrokeThickness="1" RadiusY="4" RadiusX="4" Visibility="Hidden" />
<Rectangle x:Name="TabMou5eOver2" Fill="{StaticResource TabBarBorder}" Height="1" VerticalAlignment="Bottom" Visibility="Hidden" />
<Rectangle x:Name="TabMou5ePressed" Fill="{StaticResource TabBarTop}" Height="30" Stroke="{StaticResource TabBarBorder}" RadiusY="4" RadiusX="4" Visibility="Hidden" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Visibility" TargetName="TabMou5eOver2" Value="Visible"/>
<Setter Property="Visibility" TargetName="TabMou5eOver" Value="Visible"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Visibility" TargetName="TabMou5ePressed" Value="Visible"/>
</Trigger>
<Trigger Property="IsDefaulted" Value="True">
<Setter Property="Visibility" TargetName="TabMou5ePressed" Value="Visible"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Visibility" TargetName="TabMou5ePressed" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="InvisiStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{DynamicResource TabBarText}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Background="Transparent">
<ContentPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<!--Gadients-->
<StackPanel Orientation="Vertical">
<Rectangle Height="46">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{StaticResource TabGradientBottom}" Offset="0.25"/>
<GradientStop Color="{StaticResource TabGradientTop}"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="1" Fill="{StaticResource TabBarBorder}"/>
<Rectangle Height="87">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="{StaticResource TabGradientBottom}" Offset="0.45" />
<GradientStop Color="{StaticResource TabGradientTop}"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="1" Fill="{StaticResource TabBarBottom}" Opacity="0.5"/>
<Rectangle Height="1" Fill="{StaticResource TabBarBottom}"/>
<Rectangle Height="1" Fill="{StaticResource TabBarBorder}"/>
</StackPanel>
<!--Tabs-->
<Grid Margin="15,22,0,0">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Button x:Name="cmdTab1" Content="Tab1" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" IsDefault="True"/>
<Button x:Name="cmdTab2" Content="Tab2" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" />
<Button x:Name="cmdTab3" Content="Tab3" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" />
<Button x:Name="cmdTab4" Content="Tab4" Style="{DynamicResource TabStyle}" Width="55" Height="25" Margin="10,0,0,0" />
</StackPanel>
</Grid>
<!--Tool Bars-->
<StackPanel x:Name="Tab1Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top">
<StackPanel Orientation="Vertical">
<Button x:Name="Tab1Login" Content="Login" Height="18" Margin="5,0,0,0" Style="{DynamicResource InvisiStyle}"/>
<Button x:Name="Tab1Request" Content="Request Password" Height="18" Margin="5,0,0,0" Style="{DynamicResource InvisiStyle}"/>
<Rectangle Fill="{StaticResource TabBarBorder}" Height="1" Margin="5,5,5,0"/>
<Rectangle Fill="{StaticResource TabBarTop}" Height="1" Margin="5,0,5,5" Opacity="0.5"/>
<Button x:Name="Tab1Exit" Content="Exit" Height="18" Margin="5,0,0,0" Style="{DynamicResource InvisiStyle}"/>
</StackPanel>
</StackPanel>
<StackPanel x:Name="Tab2Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top" Visibility="Hidden" />
<StackPanel x:Name="Tab3Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top" Visibility="Hidden" />
<StackPanel x:Name="Tab4Tools" Orientation="Horizontal" Margin="10,52,0,0" Height="80" VerticalAlignment="Top" Visibility="Hidden" />
<!--Data Grids-->
<DataGrid x:Name="dgTab2" ItemsSource="{Binding}" Margin="0,137,0,0" AutoGenerateColumns="True" Visibility="Collapsed" />
<DataGrid x:Name="dgTab3" ItemsSource="{Binding}" Margin="0,137,0,0" AutoGenerateColumns="True" Visibility="Collapsed" />
<DataGrid x:Name="dgTab4" ItemsSource="{Binding}" Margin="0,137,0,0" AutoGenerateColumns="True" Visibility="Collapsed" />
</Grid>
</Window>
You can bind the button click using Command property in your viewmodel and define a method using delegates. In your method you can set the visibility of datagrids as per the requirement.
Regarding your first query, I simply copied your code on my local and tried executing it, I do not see any tabs becoming invisible while the other one is selected.
My target is to bind the Content-Property of the Label to the Tag-Property of the Elements the Style is applied to. But my solution doesn't seem to work:
My style:
<Style
TargetType="TextBox"
x:Key="HintedTextBox">
<Style.Resources>
<VisualBrush
AlignmentX="Left"
AlignmentY="Center"
Stretch="None"
x:Key="HintedTextBox_Hint">
<VisualBrush.Visual>
<Label
Content="{Binding RelativeSource={RelativeSource Self}, Path=Tag}"
Foreground="LightGray" />
</VisualBrush.Visual>
</VisualBrush>
</Style.Resources>
<!-- Triggers -->
</Style>
My textbox:
<TextBox
Style="{StaticResource ResourceKey=HintedTextBox}"
x:Name="tbTest" />
If I understand correctly, you want to set the text for VisualBrush, that will be displayed in the TextBox.
You can do it like this:
<TextBox Name="MyTextBox" Tag="MyNewValue" Width="100" Height="25">
<TextBox.Background>
<VisualBrush AlignmentX="Left" AlignmentY="Center" Stretch="None">
<VisualBrush.Visual>
<Label Content="{Binding RelativeSource={RelativeSource AncestorType=TextBox}, Path=Tag}" Foreground="LightGray" />
</VisualBrush.Visual>
</VisualBrush>
</TextBox.Background>
</TextBox>
In order to explain why your example not earned:
1. As you probably understand, looking at my example, RelativeSource must be not self, in which case it will point to itself (VisualBrush), and the element with the type must be of TextBox, located higher in the visual tree.
2. Binding with RelativeSource does not work in resources, because the Resource is not part of the visual tree, or part of the template.
3. In styles this construction will not work, because the Style is just the collection of setters, he does not know about control, are there. For this purpose, usually using DataTemplate or ControlTemplate.
As an alternative, in this case, I suggest using a template for the TextBox, which will be registered VisualBrush.
Below is my example:
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="KeyboardNavigation.TabNavigation" Value="None" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="AllowDrop" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border Name="Border" CornerRadius="0" Padding="2" BorderThickness="1" BorderBrush="Black">
<Border.Background>
<VisualBrush AlignmentX="Left" AlignmentY="Center" Stretch="None">
<VisualBrush.Visual>
<Label Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Tag}"
Foreground="LightGray" />
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
<ScrollViewer Margin="0" x:Name="PART_ContentHost" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TextBox Name="MyTextBox" Tag="MyNewValue" Width="100" Height="25" />
</Grid>
Output
When I click on text box by mouse then focus does not display. and when I goes to textbox by keyboard then focus displayed. I am trying below code. So please can any one suggest me how I solve this issue.
<Style x:Key="TextBoxFocusVisualStyle" >
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Image Source="/Mit;component/Resources/txtFocus.png" Stretch="Fill" Margin="-8,-6,-8,-6"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<TextBox Grid.Column="2" Height="44" Margin="20,48,0,0" Name="txtEmailId" VerticalAlignment="Top" KeyboardNavigation.TabIndex="2" MaxWidth="400" HorizontalAlignment="Left" Width="350" Text="" FocusVisualStyle="{DynamicResource TextBoxFocusVisualStyle}" VerticalContentAlignment="Center" FontWeight="SemiBold" FontSize="18" ContextMenu="{x:Null}" />
I also tried below code after #hattenn answer:
<Application x:Class="WpfApplication1.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background">
<Setter.Value>
<VisualBrush>
<VisualBrush.Visual>
<Grid>
<Image Source="/WpfApplication1;component/Resources/txtFocus.png" Stretch="Fill" Margin="-8,-6,-8,-6"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
and
<TextBox Height="23" Name="textBox1" Width="120" Focusable="True" FocusVisualStyle="{DynamicResource TextBoxStyle}"/>
But it does not work for me. nothing happened. please suggest.
Thanks
FocusVisualStyle is only for keyboard focus, you can check it out here:
http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.focusvisualstyle.aspx
For general focus, you can use the IsFocused property, more info below:
http://msdn.microsoft.com/en-us/library/system.windows.uielement.isfocused.aspx
As an example, you can try something like this:
<Style x:Key="TextBoxStyle" TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background">
<Setter.Value>
<VisualBrush>
<VisualBrush.Visual>
<Grid>
<Image Source="/Mit;component/Resources/txtFocus.png" Stretch="Fill" Margin="-8,-6,-8,-6"/>
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Just add style to Textbox:
position:relative;
Coming off of this question, I have a textbox defined as this:
<TextBox>
<TextBox.Background>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<StackPanel>
<TextBlock Background="Blue" Opacity="0.5" Text="155"/>
</StackPanel>
</VisualBrush.Visual>
</VisualBrush>
</TextBox.Background>
</TextBox>
This results in a TextBox like this:
Now if I remove the background property, the TextBoxlooks like this:
What I want is to achieve the second image with a colored background. In the first image for example, I want the background colour to fill the remaining whitespaces as well.
You can achieve this by adding Grid with background also as VisualBrush and in that grid you can add your TextBox:
<Grid>
<Grid.Style>
<Style TargetType="Grid">
<Setter Property="Background">
<Setter.Value>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Rectangle Stretch="Fill" Stroke="Blue" Opacity="0.5" />
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
</Style>
</Grid.Style>
<TextBox>
<TextBox.Style>
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background">
<Setter.Value>
<VisualBrush Stretch="Uniform">
<VisualBrush.Visual>
<TextBlock Foreground="Gray" Opacity="0.5" Text="155"/>
</VisualBrush.Visual>
</VisualBrush>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
</Grid>