I am using a TextBox like this:
<TextBox x:Name="TxtName" IsEnabled="False" Header="Textbox header" IsReadOnly="True" TextWrapping="Wrap" Text="{Binding Name,Mode=TwoWay}" Style="{StaticResource MyTextBoxStyle}" />
I would like to be able to style (i.e. setting the font) the Header of the TextBox in a ResourceDictionary. When I set the FontFamily of the TextBox it also affect the header, but I would like to set two different font styles for the text inside the TextBox and the text in the Header.
This is my style for the TextBox:
<Style x:Key="MyTextBoxStyle" TargetType="TextBox">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="FontFamily" Value="Comic Sans MS" />
</Style>
How can I do this?
Try This
<TextBox Height="70" Width="200" Text="Text" Foreground="Green" FontFamily="Tahoma">
<TextBox.Header>
<TextBlock Text="Header" Foreground="red" FontFamily="Times New Roman"></TextBlock>
</TextBox.Header>
</TextBox>
Update
<Page.Resources>
<Style TargetType="TextBox">
<Setter Property="Height" Value="70"></Setter>
<Setter Property="Width" Value="200"></Setter>
<Setter Property="Text" Value="Text"></Setter>
<Setter Property="FontFamily" Value="Tahoma"></Setter>
<Setter Property="Foreground" Value="Green"></Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Foreground="Red" Text="{Binding}" FontFamily="Times New Roman"></TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<TextBox Header="Header" />
Related
I have to work with a 1800-Row-XAML-Definition for a single window and I want to reduce the amount of code drastically.
There are several control-definitions, which are repeated very often and I want to write Styles for some of them. One example is a Border-Definition with integrated TextBox:
<Border Grid.Column="2" Margin="1,1,5,0" Background="#bbc2ce">
<my:RibbonTextBox HorizontalContentAlignment="Center"
IsReadOnly="True" Background="#FAFAFA"
Text="{Binding Path=someViewModel.Item,Mode=OneWay}"
MinHeight="0" FontSize="12" FontWeight="Bold" FontFamily="Arial"/>
</Border>
Apart of the Binding Path, every value is exact the same over and over again. So I wrote this Style for the RibbonTextBox:
<Style TargetType="my:RibbonTextBox" x:Key="StandardRibbonTextBox">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="Background" Value="#FAFAFA" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontFamily" Value="Arial" />
</Style>
Now I want to write a style for above border, and integrate the RibbonTextBox Style. Here I am so far:
<Style TargetType="Border" x:Key="borderStyle">
<Setter Property="Background" Value="#bbc2ce" />
</Style>
Is there a possibility to integrate my TextBox-Style here? And if not, does somebody know, how to resolve this issue?
Thanks in advance!
If you only need the readonly textbox, you can use DataTemplate with ContentPresenter as coded below (replaced my:RibbonTextBox with simple TextBox for demonstration). If you need read-write, you have to provide some way of binding that allows read-write. This can be achieved with ControlTemplate (also in sample code).
<Grid x:Name="grid1">
<Grid.Resources>
<Style TargetType="TextBox" x:Key="StandardRibbonTextBox">
<!--Changed that one from HorizontalAlignment, in comparison to the question-->
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="IsReadOnly" Value="True" />
<Setter Property="Background" Value="#FAFAFA" />
<Setter Property="MinHeight" Value="0" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontFamily" Value="Arial" />
</Style>
<Style TargetType="Border" x:Key="borderStyle">
<Setter Property="Background" Value="#bbc2ce" />
<Setter Property="Margin" Value="1,1,5,0"/>
<Setter Property="Padding" Value="5"/>
</Style>
<DataTemplate x:Key="borderedTextboxTemplate" DataType="{x:Type sys:String}">
<Border Style="{StaticResource borderStyle}">
<!--This is not going to work for two way binding (IsReadOnly="False" and Text="{Binding Mode=TwoWay}")-->
<TextBox Style="{StaticResource StandardRibbonTextBox}" Text="{Binding Mode=OneWay}"/>
</Border>
</DataTemplate>
<ControlTemplate x:Key="borderedTextboxControlTemplate" TargetType="TextBox">
<Border Style="{StaticResource borderStyle}">
<!--This is not going to work for two way binding (IsReadOnly="False" and Text="{Binding Mode=TwoWay}")-->
<TextBox Style="{StaticResource StandardRibbonTextBox}" Text="{Binding Text,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}"/>
</Border>
</ControlTemplate>
<Style x:Key="borderedTextboxControlStyle" TargetType="TextBox">
<Setter Property="Template" Value="{StaticResource borderedTextboxControlTemplate}"/>
</Style>
</Grid.Resources>
<StackPanel Margin="10">
<!--Using Controls directly-->
<Border Style="{StaticResource borderStyle}">
<TextBox
Text="{Binding Path=someViewModel.Item,Mode=OneWay}"
Style="{StaticResource StandardRibbonTextBox}"/>
</Border>
<Separator Margin="10"/>
<!--Using DataTemplate-->
<ContentPresenter
Content="{Binding Path=someViewModel.Item,Mode=OneWay}"
ContentTemplate="{StaticResource borderedTextboxTemplate}"/>
<Separator Margin="10"/>
<!--Using ControlTemplate via Style-->
<TextBox Text="{Binding Path=someViewModel.Item,Mode=OneWay}" Style="{StaticResource borderedTextboxControlStyle}"/>
</StackPanel>
</Grid>
I'm trying to do the html to xaml convertor and use this code as a starting point. My app is Windows Phone 8.1 universal app. This code works very good except the hyperlinks. It looks like HyperlingButton have some hidden margin or padding and I can't fix it in the style by setting it to 0.
The hyperlink is marked with red border:
My style is here:
<Style TargetType="HyperlinkButton" x:Key="UnderlineHyperlinkButton">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="HyperlinkButton">
<TextBlock Style="{StaticResource TextStylePostBody}">
<Underline>
<Run Text="{Binding Path=Content, Mode=OneWay, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Underline>
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Style for TextBlock:
<Style x:Key="TextStylePostBody" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Padding" Value="0,0,0,0"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextTrimming" Value="WordEllipsis"/>
<Setter Property="TextWrapping" Value="WrapWholeWords"/>
</Style>
I can fix it with hardcoded values in margin <Setter Property="Margin" Value="0,-9, 4,-4"/> but it does not looks good.
The code that creates hyperlink is here:
private static Inline GenerateHyperLink(HtmlNode node)
{
Span s = new Span();
InlineUIContainer iui = new InlineUIContainer();
HyperlinkButton hb = new HyperlinkButton() { NavigateUri = new Uri(node.Attributes["href"].Value, UriKind.Absolute), Content = CleanText(node.InnerText) };
hb.Style = ( Style )Application.Current.Resources[ "UnderlineHyperlinkButton" ];
iui.Child = hb;
s.Inlines.Add(iui);
return s;
}
Is there something that I missed?
Update:
Did a quick test with this XAMl code:
<StackPanel Grid.Row="0" Orientation="Horizontal">
<TextBlock Foreground="Black" FontSize="18" FontWeight="Normal" FontFamily="Segroe UI">TextBlock</TextBlock>
<RichTextBlock>
<Paragraph>
<Run Foreground="Black" FontSize="18" FontWeight="Normal" FontFamily="Segroe UI">
<Run.Text>Run text</Run.Text>
</Run>
<InlineUIContainer>
<HyperlinkButton FontSize="18" FontFamily="Segroe UI" FontWeight="Normal" Margin="0" Padding="0,0,0,0">Link Text</HyperlinkButton>
</InlineUIContainer>
</Paragraph>
</RichTextBlock>
</StackPanel>
and got this:
Setting Margin of HyperlinkButton to -9 (Top):
It's not the problem of other text or InlineUIContainer, replacing HyperlinkButton with TextBlock fixes the margins:
Decided to avoid InlineUIContainer and HyperlinkButton due to align and formatting problems. I have replaced it with <Underline> with Link attached property. More info in this article.
EDIT: Don't know why, but I missed that runtime API have a dedicated Hyperlink class that do the job very well.
I am having a strange issue. I am not sure if this is a bug, or if I am simply misunderstanding something as I am fairly new to WPF (Probably the latter).
In my project, I have a ListView that displays items in a similar fashion to that seen of Windows Explorer using Icon view. I have outlined a control template that consists of a an Image element, and a TextBlock element below it. My goal is to adjust the maximum height of the TextBlock when the ListViewItem is selected. This is so the name of the Items will adjust from being trimmed with an ellipsis to showing the full name of the item.
When the item is selected however, instead of adjusting the maximum height of only the selected item's TextBlock, it adjusts all TextBlocks for each item whether it is actively selected or not.
I have researched for an answer, but have not found anything similar to this particular issue. This link is a similar concept, but without my problem.
WPF - ListView Item on Selected change Font size
Some of my other methods have consisted of one ControlTemplate with triggers for the style changes, or ItemContainerStyle instead of explicitly a ControlTemplate, which all seemed to give the same undesired result.
How can I achieve this functionality? Is it possible with ControlTemplate?
Here is some of my XAML code:
ListView
<ListView x:Name="ItemViewer">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Margin="10"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Margin" Value="10"/>
<Setter Property="Template" Value="{StaticResource ListViewItemNormal}"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Template" Value="{StaticResource ListViewItemSelected}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
ControlTemplates
<ControlTemplate x:Key="ListViewItemNormal" TargetType="{x:Type ListViewItem}">
<Border x:Name="ItemBoxBorder" Background="Transparent">
<Grid HorizontalAlignment="Left" MinHeight="90"
Margin="5"
MaxWidth="90"
Width="90"
x:Name="ItemBox">
<StackPanel>
<Image HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{StaticResource NewImage}"
Width="64" Height="64"/>
<TextBlock x:Name="ItemDescription"
Text="{Binding Path=Name}"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
TextWrapping="Wrap"
MaxWidth="90"
MaxHeight="30"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
<Grid.ToolTip>
<ToolTip Content="{Binding Path=Name}"/>
</Grid.ToolTip>
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter TargetName="ItemBoxBorder" Property="Background" Value="{StaticResource HighlightMouseHoverColorBrush}"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ListViewItemSelected" TargetType="{x:Type ListViewItem}">
<Border x:Name="ItemBoxBorder" Background="{StaticResource SelectedItemBrush}"
BorderBrush="{StaticResource HighlightBorderColorBrush}"
BorderThickness="1">
<Grid HorizontalAlignment="Left" MinHeight="90"
Margin="5"
MaxWidth="90"
Width="90"
x:Name="ItemBox">
<StackPanel>
<Image HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{StaticResource NewImage}"
Width="64" Height="64"/>
<TextBlock x:Name="ItemDescription"
Text="{Binding Path=Name}"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
TextWrapping="Wrap"
MaxWidth="90"
MaxHeight="125"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
<Grid.ToolTip>
<ToolTip Content="{Binding Path=Name}"/>
</Grid.ToolTip>
</Grid>
</Border>
</ControlTemplate>
EDIT
Here is an example of the issue with ms_dos's implementation.
This image shows I have the item with a short description selected. This is the height all items should remain if they are not selected.
In this image, you'll see the item with the long description is selected. However, both items extend their height, but only the selected one should grow.
You don't need two separate control templates for this. Just take the ItemContainerStyle property of the ListView and use a control template like this:
<ListView x:Name="ItemViewer">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Margin="10" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="ItemBoxBorder"
Background="Green"
BorderThickness="1"
VerticalAlignment="Top">
<Grid HorizontalAlignment="Left"
MinHeight="90"
Margin="5"
MaxWidth="90"
Width="90"
x:Name="ItemBox">
<StackPanel>
<Image HorizontalAlignment="Center"
VerticalAlignment="Top"
Width="64"
Height="64" />
<TextBlock x:Name="ItemDescription"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
TextWrapping="Wrap"
Text="{Binding}"
MaxWidth="90"
MaxHeight="125"
TextTrimming="CharacterEllipsis" />
</StackPanel>
<Grid.ToolTip>
<ToolTip Content="{Binding Path=Name}" />
</Grid.ToolTip>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="ItemBoxBorder"
Property="Background"
Value="Red" />
<Setter TargetName="ItemDescription"
Property="TextElement.FontSize"
Value="20" />
<Setter TargetName="ItemBoxBorder"
Property="Height"
Value="135" />
</Trigger>
<Trigger Property="IsSelected"
Value="false">
<Setter TargetName="ItemBoxBorder"
Property="Height"
Value="90" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Take a look at the ControlTemplate.Triggers section. Basically you use the Trigger property to control which property the trigger should handle... in our case the IsSelected from the ListView. And with the Setter you define the property and the value for the changes of the ListViewItem control. The TargetName of the Setter refers to the x:Name of the control which you define in the ControlTemplate section.
I hope this example helps you with your problem!
Greets
ms_dos
I'm still a little green when it comes to WPF. I'm currently working on a WPF form that has several text boxes on it. Each of those TextBoxes are paired with a TextBlock sitting in the same x,y coord, acting as GhostText. Once you click inside the TextBox the GhostText disappears.
Below is an example of how the binding was originally setup in the form's XAML (this same code is duplicated for all text boxes thus the reasoning behind using a style) :
<TextBox Grid.Column="0" Width="40" Height="25" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name= "RecordMinutesTextBox" Padding="12,5,5,0" Text ="{Binding RecordMinute}" Margin="0,25,5,1" PreviewTextInput="CheckNumberValidation" Background="{Binding ElementName=FireWashingtonResponseTimeReport,Path=DataContext.RequiredFieldColor}"/>
<TextBlock Grid.Column="0" Width="40" IsHitTestVisible="False" Text="MIN" VerticalAlignment="Center" HorizontalAlignment="Left" Foreground="DarkGray" Margin="8,25,0,1" >
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=RecordMinutesTextBox}" Value="">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
*Note the name of one of the many text boxes,"RecordMinutesTextBox", used as the ElementName for the DataTrigger Binding.
Here is the code from inside my WPF Style template:
<Style x:Key="MinuteAndSecondsGhostText" TargetType="TextBlock">
<Setter Property="Width" Value="40"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Foreground" Value="DarkGray"/>
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=??WhatDoIPutHere??}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>enter code here
So my question really comes down to this. What should I use in the DataTrigger Binding as the ElementName for this style? Considering that I have multiple TextBoxes with different names on my form. Thanks in advance.
I give you an idea... and you can change your codes base on it.
In my following sample you see the TextBlock shows state of IsFocused property of the TextBox. So you can put the pair of your elements in a parent like StackPanel and access to properties of one child in another child by RelativeSource instead of ElementName...
Just put this codes in your window and focus in TextBox, What you see inside the TextBlock?
<StackPanel Orientation="Horizontal" Background="White" Margin="20">
<TextBox Text="" Name="TextBox" Background="DarkSalmon" Width="100" Height="30"/>
<TextBlock Text="{Binding Path=Children[0].IsFocused,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type StackPanel}}}"
Margin="20,0"/>
</StackPanel>
Edit:
Base on my above idea you can use RelativeSource instead of ElementName to resolve your problem like the following sample:
<Style x:Key="MinuteAndSecondsGhostText" TargetType="TextBlock">
<Setter Property="Width" Value="40"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Foreground" Value="DarkGray"/>
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Children[0].Text,
RelativeSource={RelativeSource Mode=FindAncestor,
AncestorType={x:Type StackPanel}}}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
And in your Window body:
<StackPanel x:Name="Pair1" Orientation="Horizontal" Background="White" Margin="20">
<!--TextBox should be first child of StackPanel-->
<TextBox Text="" Name="TextBox1" Background="DarkSalmon" Width="100" Height="30"/>
<TextBlock Text="Sample Text" Style="{StaticResource MinuteAndSecondsGhostText}" Margin="20,0"/>
</StackPanel>
<StackPanel x:Name="Pair2" Orientation="Horizontal" Background="White" Margin="20">
<!--TextBox should be first child of StackPanel-->
<TextBox Text="" Name="TextBox2" Background="DarkSalmon" Width="100" Height="30"/>
<TextBlock Text="Sample Text" Style="{StaticResource MinuteAndSecondsGhostText}" Margin="20,0"/>
</StackPanel>
Could someone help with this.
Im trying to make the following code so that i can inject what ever image i want into this button style. as this button style is used throughout the whole application
<Style TargetType="Button" x:Key="ButtonIsChecked">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Content="{Binding Content}" Name="CheckBox_Logon" IsHitTestVisible="False" IsChecked="False">
<CheckBox.Template>
<ControlTemplate TargetType="{x:Type CheckBox}">
<WrapPanel>
<Image
Source="/AdminUltimate;component/Images/Icons/Windows.ico"
Width="15" Margin="3"
Visibility="{Binding IsChecked, Converter={StaticResource BoolToVis}, ElementName=DisableIcons}"/>
<TextBlock Text="{Binding}" VerticalAlignment="Center"/>
</WrapPanel>
</ControlTemplate>
</CheckBox.Template>
</CheckBox>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Current Usage
<Button Content="Login" Style="{StaticResource ButtonIsChecked}"/>
i would like to do something like
<Button Content="Login" Style="{StaticResource ButtonIsChecked}" imgsrc="Pathtoimage"/>
Is this possible?
Something quick and easy to use to piggy back a dependency string through is Tag like;
<Style TargetType="Button" x:Key="ButtonIsChecked">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Focusable" Value="False"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Tag" Value="/Default/Image/Path.jpg"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Content="{Binding Content}" Name="CheckBox_Logon" IsHitTestVisible="False" IsChecked="False">
<CheckBox.Template>
<ControlTemplate TargetType="{x:Type CheckBox}">
<WrapPanel>
<Image
Source="{TemplateBinding Tag}"
Width="15" Margin="3"
Visibility="{Binding IsChecked, Converter={StaticResource BoolToVis}, ElementName=DisableIcons}"/>
<TextBlock Text="{Binding}" VerticalAlignment="Center"/>
</WrapPanel>
</ControlTemplate>
</CheckBox.Template>
</CheckBox>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Then implement like;
<Button Style="{StaticResource ButtonIsChecked}" Tag="/AdminUltimate;component/Images/Icons/Windows.ico"/>
Hope this helps.