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>
Related
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}"/>
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
I am trying to achieve the "hint text" functionality for a TextBox in WPF. I can set the default text fine, but the problem comes when I want the control to return its appearance to a normal TextBox. Here is the trigger I have so far:
Trigger A
<Trigger Property="Text" Value="{x:Static sys:String.Empty}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<TextBox>
<TextBox.Background>
<VisualBrush AlignmentX="Left" AlignmentY="Center" Stretch="UniformToFill">
<VisualBrush.Visual>
<Label Content="{TemplateBinding TextBox.Tag}" Background="White"/>
</VisualBrush.Visual>
</VisualBrush>
</TextBox.Background>
</TextBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
This sets the Background to a VisualBrush when the Text property is empty. What I need to do is clear this ControlTemplate when the user selects the TextBox to input text.
Here is what I tried:
Trigger B
<Trigger Property="IsKeyboardFocused" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<TextBox/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
These two don't work together. I tested each by changing the Background colors. If I comment out either one, they will each work. If both are uncommented, Trigger A works and B is never seen. How can I remove/overwrite Trigger A?
I know that the functionality of these templates is supposed to clear when the trigger condition is no longer met, but for example, Trigger A's setting will not go away when I enter text into the TextBox like it should. Like the Text property is still String.Empty or something.
So what am I missing?
EDIT:
Here is the whole style (there's not much more to it):
<UserControl.Resources>
<Style TargetType="TextBox" x:Key="FormsTextBox">
<Setter Property="Width" Value="45"/>
<Setter Property="Margin" Value="3 2 3 2"/>
<Style.Triggers>
<Trigger Property="Text" Value="{x:Static sys:String.Empty}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<TextBox>
<TextBox.Background>
<VisualBrush AlignmentX="Left" AlignmentY="Center" Stretch="UniformToFill">
<VisualBrush.Visual>
<Label Content="{TemplateBinding TextBox.Tag}" Background="White" Width="45"/>
</VisualBrush.Visual>
</VisualBrush>
</TextBox.Background>
</TextBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I cannot see whole template but this looks a bit overcomplicated. I assume you're trying to achieve watermark text. For hint use box standard ToolTip property, which by default will display your text in a popup when hover your TextBox but this behaviour can be disabled and ToolTip property reused. You can either create reusable Style - which I prefer - for TextBox, something like this:
<Window ...>
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<Style TargetType="{x:Type TextBox}" x:Key="WatermarkTextBoxStyle">
<Setter Property="ToolTipService.IsEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"
BorderThickness="1"
BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}">
<Grid>
<TextBlock Margin="5,0,0,0"
Text="{TemplateBinding ToolTip}"
Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}"
Opacity="0.5"/>
<ScrollViewer Name="PART_ContentHost"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TextBox ToolTip="watermark text" Style="{StaticResource WatermarkTextBoxStyle}"/>
</Window>
or, if it's a one-off thing, then do you can do something like this without any Style or Template:
<Grid Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}">
<TextBlock Margin="5,0,0,0"
Text="watermark text"
Opacity="0.5"
Visibility="{Binding ElementName=myTextBox, Path=Text.IsEmpty, Converter={StaticResource BooleanToVisibilityConverter}}" />
<TextBox Name="myTextBox" Background="Transparent" />
</Grid>
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;
I wish to increase the size of a control whenever the user hovers the mouse.
The size increase should not readjust the other controls, rather the current control should overlap the neighboring controls as is the case with google search (images tab) shown below:
The image with red border overlaps the other images.
You could use ScaleTransform in RenderTransform on IsMouseOver. If you want the Scaling to be done from the Center of the Control you can use RenderTransformOrigin="0.5,0.5". Also, you'll probably need to set the ZIndex in the Trigger to make sure it is displayed on top of the other Controls. Example with a TextBlock
Update
Try it like this
<ItemsControl Margin="50">
<ItemsControl.Resources>
<Style x:Key="ScaleStyle" TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Grid.ZIndex" Value="1"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1.1" ScaleY="1.1"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.Resources>
<TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="Something.." Background="Red" Height="20"/>
<TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock2" Background="DarkBlue" Height="20"/>
<TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock3" Background="DarkBlue" Height="20" Foreground="White"/>
<TextBlock Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" Text="TextBlock4" Background="DarkBlue" Height="20" Foreground="White"/>
</ItemsControl>
For a shadowing effect, along with giving the image a horizontal alignment:
<ItemsControl Margin="50,200,50,0">
<ItemsControl.Resources>
<Style x:Key="ScaleStyle" TargetType="Image">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Grid.ZIndex" Value="1"/>
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1.1" ScaleY="1.5" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ItemsControl.Resources>
<Image Height="100" Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="D:\Cablevision\Cable Vision RFP DOCs\WpfApplication1\WpfApplication1\square-house-design.jpg" MouseDown="image1_MouseDown">
<Image.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="320"
ShadowDepth="25" Softness="1" Opacity="0.5"/>
</Image.BitmapEffect>
</Image>
<Image Height="100" Margin="110,-100,0,0" Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="D:\Cablevision\Cable Vision RFP DOCs\WpfApplication1\WpfApplication1\file.jpg" >
<Image.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="320"
ShadowDepth="25" Softness="1" Opacity="0.5"/>
</Image.BitmapEffect>
</Image >
<Image Height="100" Margin="220,-100,0,0" Style="{StaticResource ScaleStyle}" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="D:\Cablevision\Cable Vision RFP DOCs\WpfApplication1\WpfApplication1\file.jpg" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" />
</ItemsControl>
#Meleak... You would not get the required effect when you have multiple TextBlocks stacked together....
for e.g. check this :
<ItemsControl>
<TextBlock Text="Something.." Background="Red" Height="20">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="2" ScaleY="2"/>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Text="TextBlock2" Background="DarkBlue" Height="20" Foreground="White"></TextBlock>
<TextBlock Text="TextBlock3" Background="DarkBlue" Height="20" Foreground="White"></TextBlock>
<TextBlock Text="TextBlock4" Background="DarkBlue" Height="20" Foreground="White"></TextBlock>
</ItemsControl>