The problem I have with TextBlock is that it sometimes cuts off text. The image below is the output of the xaml below it. The first TextBlock should contain Défi maximum, but the last m is cut off. I get it to reappear when I change part of the style, but I need it to be exactly like this. What could be the cause of this?
As you can see the TextBlock has enough space, the margin around the TextBlock is blue in the image below. The second TextBlock has an extra character which causes the TextBlock to show the text correctly. (even though there is a spelling error in it ;-) )
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="Candara"/>
<Setter Property="FontSize" Value="13"/>
<Setter Property="FontWeight" Value="Regular"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Background" Value="Red"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0"/>
</Style>
<Style TargetType="Grid">
<Setter Property="Width" Value="87"/>
<Setter Property="Height" Value="87"/>
<Setter Property="Background" Value="Blue"/>
<Setter Property="Margin" Value="1"/>
</Style>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<Grid>
<TextBlock>Défi maximum</TextBlock>
</Grid>
<Grid>
<TextBlock>Défi maximume</TextBlock>
</Grid>
<Grid>
<TextBlock>3x10</TextBlock>
</Grid>
<Grid>
<TextBlock>4x10</TextBlock>
</Grid>
</StackPanel>
Decrease the font size or increase the box width.
Related
I want to show a red border around a Textbox when a validation error occurs. This works, but there is also a blue border showing inside the red one, which I don't want to be shown. Is there a way to remove this?
Style for the Textbox
<Style x:Key="StandardTextbox" TargetType="{x:Type TextBox}">
<Setter Property="Height" Value="20"/>
<Setter Property="Margin" Value="10,5,10,5" />
<Setter Property="FontSize" Value="12"/>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource Blau}"/>
<Setter Property="VerticalContentAlignment" Value="Center" />
</Style>
Usage in Window:
<TextBox Grid.Row="0" Grid.Column="1"
Text="{Binding Path=Location,
UpdateSourceTrigger=PropertyChanged,
ValidatesOnDataErrors=True,
NotifyOnValidationError=true}"
Style="{StaticResource StandardTextbox}" Grid.ColumnSpan="3"/>
Enlargement:
That's because you're setting BorderBrush to Blau inside your Style. You can remove it if there is any Validation error by using Triggers. Like,
<Style x:Key="StandardTextbox" TargetType="{x:Type TextBox}">
<Setter Property="Height" Value="20"/>
<Setter Property="Margin" Value="10,5,10,5" />
<Setter Property="FontSize" Value="12"/>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{StaticResource Blau}"/>
<Setter Property="VerticalContentAlignment" Value="Center" />
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="BorderBrush" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
The last to columns of my Data grid are read only and are supposed to ignore the tab completely since I set the Focusable property to False. The Data Grid is not custom it is only styled.
I can´t get the Tab to ignore the last two columns. I would like to jump from the 8th column right to the beginning of the next row. Instead, I have to tab through the last two columns before I get to the next row.
<Style x:Key="DataGridCellFocusVisualStyle">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle StrokeThickness="2"
Stroke="{StaticResource DarkGrayBrush}"
SnapsToDevicePixels="true"
Margin="-5 0 0 0"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DataGridCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="BorderBrush" Value="{StaticResource DarkGrayBrush}" />
<Setter Property="BorderThickness" Value="0 0 1 0" />
<Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<ContentControl Margin="5 0 0 0" Content="{TemplateBinding Content}"
FocusVisualStyle="{StaticResource DataGridCellFocusVisualStyle}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="Foreground" Value="{StaticResource BlackBrush}"/>
<Setter Property="Background" Value="{StaticResource WhiteBrush}"/>
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="IsTabStop" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
This is the Column I want to jump over.
The Cell style is based on the CellStyle that we see in DataGridCellStyle in the XAML on top.
<Style x:Key="CalculationNumericColumnCellStyle"
BasedOn="{StaticResource LeschacoDataGridCellStyle}"
TargetType="{x:Type DataGridCell}">
<Setter Property="TextBlock.TextAlignment" Value="Right" />
</Style>
Try the following style, it will skip all the columns where you have placed IsReadOnly = "True".
<Style TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="true">
<Setter Property="IsTabStop" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
I answered my own question yet again. I saw that when I apply a Template to this part of the Data Grid, the Data Grid Cell seems to be seen by the TabManager as two controls in the visual tree. So the Focus Visual Style of the Data Grid Cell was the Dotted Rectangle and the Focus Visual Style of the Template was the Continuous Rectangle. So, lesson learned here is that you should not apply Templates to controls unless you absolutely have to. Heres the new XAML implementation of the Data Grid Cell if anyone is interested.
<Style x:Key="DataGridCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="BorderBrush" Value="{StaticResource DarkGrayBrush}" />
<Setter Property="BorderThickness" Value="0 0 1 0" />
<Setter Property="FocusVisualStyle" Value="{StaticResource DataGridCellFocusVisualStyle}"/>
<!--<Setter Property="VerticalAlignment" Value="Center"/>-->
<!--<Setter Property="Padding" Value="-20 0 0 0"/>-->
<Setter Property="Margin" Value="5 0 0 0"/>
<Style.Triggers>
<Trigger Property="DataGridCell.IsSelected" Value="True" >
<Setter Property="Background" Value="{StaticResource LightBlueBrush}"/>
<Setter Property="Foreground" Value="{StaticResource BlackBrush}"/>
</Trigger>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="IsTabStop" Value="False"/>
</Trigger>
</Style.Triggers>
</Style>
I have breaking my brain over this for a couple of hours now. I'm only trying to center my datagrid content vertical and horizontally. Every time something seems to work it gives other problems. My code currently is like the following:
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FrameworkElement.HorizontalAlignment" Value="Center"/>
<Setter Property="FrameworkElement.VerticalAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid>
<ContentPresenter HorizontalAlignment="Center" />
<ContentPresenter VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFA1A1A1"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFA1A1A1"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.CellStyle>
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Height" Value="35"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Background" Value="#FFDDDDDD"/>
<Setter Property="Foreground" Value="#FF3E3E42"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#FFA1A1A1"/>
<Setter Property="Foreground" Value="#FFD1D1D1"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="#FFA1A1A1"/>
<Setter Property="Foreground" Value="Black"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
With this code the text is aligned vertical and horizontally, but... There are two problems coming with this code.
1.) I can only select a row by clicking on the text. This needs to be the whole row.
2.) If I edit a column text then the vertical alignment will go from center to top. Also the textbox is only wrapped around the text.
I have tried almost every combination but it's not working. Thanks in advance!
EDIT: I got point 2 working now. If somebody knows somethings about point 1, please let me know
On hover of a HyperlinkButton in a vertical StackPanel, controls below the HyperlinkButton inch down a few pixels. It's kind of a weird bug, and I'm sure there's a fix, but the only HyperlinkButton bug fix I find relates to large text rendering a tad blurry on hover, not this positioning bug. Has anyone come across this?
XAML:
<Canvas x:Name="LayoutRoot">
...
<StackPanel x:Name="Article1" Style="{StaticResource ArticleContainer}"
Canvas.Top="46">
<StackPanel Orientation="Horizontal">
<Image x:Name="Article1Image" Style="{StaticResource ImageCategory}"/>
<TextBlock x:Name="Article1Title" Style="{StaticResource TitleText}"/>
</StackPanel>
<TextBlock x:Name="Article1Posted" Style="{StaticResource PostedText}"/>
<HyperlinkButton x:Name="Author1Link" Style="{StaticResource HLBStyling}">
<TextBlock x:Name="Article1By" Style="{StaticResource AuthorText}"/>
</HyperlinkButton>
<TextBlock x:Name="Article1Content" Style="{StaticResource ContentText}"/>
<HyperlinkButton x:Name="Article1Link" Style="{StaticResource HLBStyling}">
<TextBlock x:Name="Article1ReadMore" Style="{StaticResource ReadMoreText}"/>
</HyperlinkButton>
</StackPanel>
...
</Canvas>
App.xaml:
<Style x:Key="ContentPanel" TargetType="Border">
<Setter Property="Height" Value="427"/>
<Setter Property="Width" Value="250"/>
<Setter Property="Canvas.Top" Value="33"/>
<Setter Property="Canvas.Left" Value="0"/>
<Setter Property="Canvas.ZIndex" Value="1"/>
</Style>
<Style x:Key="ArticleContainer" TargetType="StackPanel">
<Setter Property="Height" Value="195"/>
<Setter Property="Width" Value="230"/>
<Setter Property="Canvas.Left" Value="10"/>
<Setter Property="Canvas.ZIndex" Value="2"/>
</Style>
<Style x:Key="ImageCategory" TargetType="Image">
<Setter Property="Width" Value="40"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Margin" Value="5,5,5,0"/>
</Style>
<Style x:Key="TitleText" TargetType="TextBlock">
<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Height" Value="32"/>
<Setter Property="Width" Value="170"/>
<Setter Property="TextTrimming" Value="WordEllipsis"/>
<Setter Property="Margin" Value="10,0,0,0"/>
</Style>
<Style x:Key="PostedText" TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Height" Value="14"/>
<Setter Property="Width" Value="230"/>
<Setter Property="Margin" Value="0,10,0,0"/>
</Style>
<Style x:Key="AuthorText" TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Height" Value="14"/>
<Setter Property="Width" Value="230"/>
</Style>
<Style x:Key="ContentText" TargetType="TextBlock">
<Setter Property="LineStackingStrategy" Value="BlockLineHeight"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="MaxHeight" Value="90"/>
<Setter Property="Width" Value="230"/>
<Setter Property="TextTrimming" Value="WordEllipsis"/>
</Style>
<Style x:Key="ReadMoreText" TargetType="TextBlock">
<Setter Property="FontSize" Value="12"/>
<Setter Property="Height" Value="16"/>
</Style>
<Style x:Key="HLBStyling" TargetType="HyperlinkButton">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="IsTabStop" Value="False"/>
</Style>
This is caused by your the two styles you are using for HyperLinkButton (HLBStyling) and the TextBlocks they contain (AuthorText, ReadMoreText).
If you remove the TextBlock and just set the Content of the HyperLinkButton, the problem goes away. Also if you remove the style from the TextBlocks within the buttons, the problem goes away.
I am trying to work out a style for a ComboBox that has a navy background with white text, so I want the drop down arrow to be white also (the xaml I have so far is below).
<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
<Setter Property="Background" Value="{StaticResource headerBrush}"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="BorderBrush" Value="{StaticResource headerBorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="MinWidth" Value="100"/>
<Setter Property="Height" Value="21"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Padding" Value="5"/>
<Setter Property="Margin" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
<Style x:Key="ComboBoxItemStyle" TargetType="ComboBoxItem">
<Setter Property="Background" Value="AliceBlue"/>
<Setter Property="Foreground" Value="Navy"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
</Style>
ADDED code to set the ControlTemplate?
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Path x:Name="Arrow" Fill="White"/>
</ControlTemplate>
</Setter.Value>
</Setter>
You need to edit the ControlTemplate of ComboBox and you can see a the Arrow as a Path. So change the Fill property of the Path to your desired arrow color. See sample ControlTemplate here
http://msdn.microsoft.com/en-us/library/ms752094.aspx