I have a rounded border around a textbox. When displaying it, the horizontal top and bottom lines of the textbox are shown despite setting "BorderThickness" property to 0 and "BorderBrush" to transparent. How can I do borders for textbox to be not shown?
Below the code:
<Border Grid.Row="0" Grid.Column="0"
BorderBrush="DarkBlue"
BorderThickness="0.8"
CornerRadius="5"
Margin="5,10,3,10"
Height="Auto" Width="Auto"
Background="AliceBlue"
HorizontalAlignment="Left">
<TextBox x:Name="txtSearch"
Width="250"
Style="{StaticResource WatermarkedTextBox}"
VerticalAlignment="Center"
HorizontalAlignment="Left"
BorderBrush="Transparent"
BorderThickness="0"
Margin="1"/>
</Border>
Any ideas why textbox borders are being displayed?
ATTEMPT #1:
I have found that the culprit is the style attached, that is the static resource WatermarkedTextBox which is as follows:
<Style x:Key="WatermarkedTextBox" TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
<TextBox Text="{Binding Text, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center"
Text="{TemplateBinding Tag}"
Margin="5,0,5,0"
Foreground="#FF808080"
FontStyle="Italic"
IsHitTestVisible="False"
x:Name="UserMessage"
Visibility="Hidden"/>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Text" Value=""/>
<Condition Property="IsKeyboardFocusWithin" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="UserMessage" Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So how can I solve this?
The culprit was the border of the textbox set in the style "WatermarkedTextbox" so setting BorderThickness property to 0 is working now:
<Style x:Key="WatermarkedTextBox" TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
<TextBox BorderThickness="0"
Text="{Binding Text, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center"
Text="{TemplateBinding Tag}"
Margin="5,0,5,0"
Foreground="#FF808080"
FontStyle="Italic"
IsHitTestVisible="False"
x:Name="UserMessage"
Visibility="Hidden"/>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Text" Value=""/>
<Condition Property="IsKeyboardFocusWithin" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="UserMessage" Value="Visible"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I can do the watermark text/placeholder on a WPF textbox control by using the below XAML code.
<TextBox Name="txtFilter" Grid.Row="1" Height="25" Width="250" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Margin="5,0,0,0" TextChanged="txtFilter_TextChanged">
<TextBox.Style>
<Style BasedOn="{StaticResource {x:Type TextBox}}" TargetType="{x:Type TextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border Background="White" CornerRadius="5" BorderBrush="Black" BorderThickness="1">
<Grid>
<ScrollViewer x:Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<TextBlock x:Name="textBlock" VerticalAlignment="Center" Opacity="0.5" Text=" Search by Customer Name " Foreground="Blue" FontStyle="Italic" Visibility="Hidden" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsFocused" Value="False" />
<Condition Property="Text" Value="" />
</MultiTrigger.Conditions>
<Setter Property="Visibility" TargetName="textBlock" Value="Visible" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TextBox.Style>
</TextBox>
But how it is possible for a WPF Combo box control ? I tried with the below shown XAML code. But it is not working.
<ComboBox.Resources>
<VisualBrush x:Key="HelpBrush" TileMode="None" Opacity="0.4" Stretch="None" AlignmentX="Left">
<VisualBrush.Visual>
<TextBlock FontStyle="Italic" Opacity="0.5" Text="Type or select from list" Foreground="Blue" Visibility="Visible"/>
</VisualBrush.Visual>
</VisualBrush>
</ComboBox.Resources>
<ComboBox.Style>
<Style TargetType="ComboBox">
<Style.Triggers>
<Trigger Property="Text" Value="{x:Null}">
<Setter Property="Background" Value="{StaticResource HelpBrush}"/>
</Trigger>
<Trigger Property="Text" Value="">
<Setter Property="Background" Value="{StaticResource HelpBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
Can anyone help me to place a watermark text on a WPF Combobox control ???
I want to show Image inside of the Title of header in TabControl
This question(WPF TabItem - Image Binding) seems is right, but I have using Triggers and it doesn't help on my code.
Here is what I have Providing:
<TabControl Name="MainTabControl" Margin="0,28,0,0" TabStripPlacement="Top" >
<TabControl.Resources>
<Image x:Key="imgProfile" Source="/Icons/red icons/profile.png" />
<Image x:Key="imgComment" Source="Icons/red icons/notification.png" />
<Style TargetType="TabItem" >
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding}"
MouseDown="UIElement_OnMouseDown"
FontSize="18"
/>
<Image Height="25" Margin="4,0,4,0"
Source="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Tag.Source}" />
</WrapPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Gainsboro" CornerRadius="0" Margin="2,0">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="5,2"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
<Setter TargetName="Border" Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="{DynamicResource TabItemNormal}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem Name="tiProfile" Header="a" Tag="{StaticResource imgProfile}"></TabItem>
<TabItem Name="tiComment" Header="b" Tag="{StaticResource imgComment}"></TabItem>
</TabControl>
the binding from TabItem.HeaderTemplate to the TabItem.Tag must be via FindAncestor of TabItem type.
instead create Images in Resources, create BitmapImage, and bind it the Image.Source.
so, Resources:
<BitmapImage x:Key="imgProfile" Source="/Icons/red icons/profile.png" />
<BitmapImage x:Key="imgComment" Source="Icons/red icons/notification.png" />
Header DataTemplate:
<Image Height="25" Margin="4,0,4,0"
Source="{Binding Tag, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TabItem}}}" />
I changed the style of ItemContainerStyle and that was the result:
I enjoyed the result, but when testing usability I noticed that when I select a region without text or image (red region on image) the "IsSelected" doesn't fire and doesn't select the item. Without the style change, that issue not occur..
Someone know the reason e how fix that issue?
Here is my xaml code:
<DockPanel>
<ListBox x:Name="lvCustomers" Margin="0" BorderThickness="0" SelectionMode="Single"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto" Background="{x:Null}" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Border Name="BackgroundBorder" SnapsToDevicePixels="True"/>
<Border Name="Border">
<ContentPresenter />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="BackgroundBorder" Property="Background" Value="Black" />
<Setter TargetName="BackgroundBorder" Property="Opacity" Value="0.5" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="BackgroundBorder" Property="Background" Value="Black" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel Margin="10,0,0,5" HorizontalAlignment="Stretch">
<DockPanel Margin="0,10,10,10" DockPanel.Dock="Left" HorizontalAlignment="Stretch">
<TextBlock FontWeight="Bold" Foreground="White" x:Name="customerDetailsName" Text="{Binding Name}" FontSize="16" DockPanel.Dock="Top"/>
<DockPanel DockPanel.Dock="Top">
<TextBlock Foreground="White" x:Name="customerDetailsCityContent" Text="{Binding City}" FontSize="14" />
<TextBlock Foreground="White" x:Name="customerDetailsBarraContent" Text="-" FontSize="12" />
<TextBlock Foreground="White" x:Name="customerDetailsStateContent" Text="{Binding Region}" FontSize="14" />
</DockPanel>
<TextBlock Foreground="White" x:Name="customerDetailsCNPJContent" Text="{Binding CNPJ}" FontSize="14" />
</DockPanel>
<Image x:Name="customerImageStatus" Source="{Binding StatusImage}" Width="22" Height="22" Margin="10,0,25,0" DockPanel.Dock="Right" HorizontalAlignment="Right" />
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DockPanel>
Thanks in advance.
Please try by setting Background="Transparent" or IsHitTestVisible="True" to grid and border in controltemplate.As to achieve hit test for an transparent object, you should set the background to transparent.
I have a TabControl containing TabItems. I overwrote their ItemTemplate to contain:
A TextBlock showing the caption of the TabItem
A Button (X) which closes the tab
Now I would like to make the "X"-Button only visible, when the TabItem is either selected or the mouse is over it.
This is my XAML code so far...
<TabControl x:Name="tabControl"
ItemsSource="{Binding OpenedItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TabCaption}"
Grid.Column="0"
Foreground="White"
HorizontalAlignment="Left"
Margin="3"
Name="label_TabTitle"
VerticalAlignment="Center" />
<Button Content="X"
Grid.Column="1"
Foreground="White"
HorizontalAlignment="Right"
Margin="3"
Name="button_close"
VerticalAlignment="Center"
Width="20"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Visibility="Hidden"
Click="button_close_Click_1">
</Button>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="button_close" Property="Visibility" Value="Visible"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Background" Value="#1C1C1C" />
<Setter Property="Content" Value="{Binding TabContentView}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Name="Grid"
Background="{StaticResource GrayBrush}">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource BlueBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource LightBlueBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
With the Trigger inside the DataTemplate it kind of works.. but: you have to hover the mouse directly over the Label in order to show the button. So basically, it is impossible to click the button, because it disappears again.
I would appreciate any help with these WPF Templates!
Thanks, Christian
It looks as though your TabItem does not have the background set so it is not catching the MouseOverEvent. Since the TextBlock has the foreground set and has text, it captures the MouseOverEvent. Try setting the Background child grid of the DataTemplate to Transparent and you should see that the MouseOverEvent will be caught and show the close button.
<TabControl x:Name="tabControl" ItemsSource="{Binding OpenedItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid" VerticalAlignment="Center" Background="Transparent">
...
</Grid>
...
</DataTemplate>
</TabControl.ItemTemplate>
...
</TabControl>
If you set opacity instead of visibility it works. Removed all references to Visibility, changed to Opacity:
You may want to check my code edit. Not 100% sure it's a duplicate of what you had, but the idea works. Why? Not sure. :) I'm guessing the Hidden-Button was swallowing the MouseEnter events, but refusing to pass them on because it was hidden.
<TabControl x:Name="tabControl"
ItemsSource="{Binding OpenedItems}">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Name="grid" VerticalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding TabCaption}"
Grid.Column="0"
Foreground="White"
HorizontalAlignment="Left"
Margin="3"
Name="label_TabTitle"
VerticalAlignment="Center" />
<Button Content="X"
Grid.Column="1"
Foreground="White"
HorizontalAlignment="Right"
Margin="3"
Name="button_close"
VerticalAlignment="Center"
Width="20"
Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
Opacity="0"
Click="button_close_Click_1">
</Button>
</Grid>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True" >
<Setter TargetName="button_close" Property="Opacity" Value="1"/>
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ItemContainerStyle>
<Style TargetType="TabItem">
<Setter Property="Background" Value="#1C1C1C" />
<Setter Property="Content" Value="{Binding TabContentView}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Name="Grid"
Background="{StaticResource GrayBrush}">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource BlueBrush}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Grid" Property="Background" Value="{StaticResource LightBlueBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.ItemContainerStyle>
</TabControl>
I am trying to recreate the Mail UI from Windows 8 in a WPF application running on Windows 7. Here's what I want to achieve:
In particular, I don't know how to change the background color for selected items e.g. the Inbox item in the first column and the mail from Twitter in the second column. I have tried several solutions from other similar Stackoverflow Questions but none seem to work for me. e.g.
Selected item loses style when focus moved out in WPF ListBox
WPF ListView Inactive Selection Color
Here is the code I have for my listview:
<ListView Grid.Row="0" SelectedItem="{Binding Path=SelectedArea}" ItemsSource="{Binding Path=Areas}" Background="#DCE3E5" >
<ListView.Resources>
<!-- Template that is used upon selection of an Area -->
<ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem">
<Border Background="#388095" Cursor="Hand" >
<TextBlock Text="{Binding Name}" Margin="5" />
</Border>
</ControlTemplate>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<!-- Base Template that is replaced upon selection -->
<ControlTemplate TargetType="ListViewItem">
<Border Background="#DCE3E5" Cursor="Hand" >
<TextBlock Text="{Binding Name}" Margin="5" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="Template" Value="{StaticResource SelectedTemplate}" />
</MultiTrigger>
</Style.Triggers>
</Style>
</ListView.Resources>
</ListView>
How can I change the background color of the selected item? And how do I retain the color change when the focus changes.
I did something similar to this recently:
<ListView.Resources>
<ControlTemplate x:Key="SelectedTemplate" TargetType="ListViewItem">
<Border CornerRadius="5" BorderThickness="1" BorderBrush="DarkGray" Background="#FF92C6F9" Padding="2" HorizontalAlignment="Left" Margin="5" Tag="{Binding Value}" Cursor="Hand" MouseUp="Border_MouseUp_1">
<TextBlock Text="{Binding Name}" Margin="5" />
</Border>
</ControlTemplate>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border CornerRadius="5" BorderThickness="1" BorderBrush="DarkGray" Background="WhiteSmoke" Padding="2" HorizontalAlignment="Left" Margin="5" Tag="{Binding Value}" Cursor="Hand" MouseUp="Border_MouseUp_1" >
<TextBlock Text="{Binding Name}" Margin="5" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true" />
<Condition Property="Selector.IsSelectionActive" Value="true" />
</MultiTrigger.Conditions>
<Setter Property="Template" Value="{StaticResource SelectedTemplate}" />
</MultiTrigger>
</Style.Triggers>
</Style>
</ListView.Resources>
I believe removing:
<Condition Property="Selector.IsSelectionActive" Value="true" />
will allow you to keep the background color after focus is lost.
EDIT:
In response to your question below:
You can bind the tag property of the TextBlock to the command parameter, and then execute the command on the MouseUp event of the TextBlock:
<TextBlock x:Name="MyTextBlock" Text="Click Me!" Tag="{Binding MyCommandParameter}" MouseUp="MyTextBlock_MouseUp" />
And in the code behind:
private void MyTextBlock_MouseUp(object sender, MouseButtonEventArgs e)
{
TextBlock tb = sender as TextBlock;
if (tb != null && tb.Tag != null)
{
ViewModel.MyCommand.Execute(tb.Tag);
}
}
Just adding to "TrueEddie" point.
The other option would be "ItemContainerStyle" in ListView.
<ListView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2"
BorderThickness="0"
ItemContainerStyle="{StaticResource ListViewSmartNotes}"
SelectedItem="{Binding SelectedSmartNotes, Mode=TwoWay}"
ItemsSource="{Binding LstSmartNotes, Mode=TwoWay}"
ItemTemplate="{DynamicResource ListViewItemOptionStyle}">
</ListView>
ListViewItemOptionStyle defined in Style.xml
<Style x:Key="ListViewItemOptionStyle" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<!-- Trun off default selection-->
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd" BorderBrush="Gray" BorderThickness="0,1,0,1"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True" />
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="Background" Value="Green" />
<Setter Property="BorderBrush" Value="Green" />
<Setter Property="Foreground" Value="White"/>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
Fore more details
https://sites.google.com/site/greateindiaclub/mobil-apps/windows8/wpfimportantbindings