ToolTip reserves space for text but does not display it.
So displayed on Win XP and Win 7
Should be like that
ToolTip style:
<Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
<Setter Property="Padding" Value="5" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="{x:Static common:WPFColors.NESTED_FORMS_BORDER_BRUSH}"/>
<Setter Property="Background" Value="{x:Static settings:UIGeneratorBackgrounds.DEFAULT_BACKGROUND_WPF_BRUSH}"/>
<Setter Property="FontSize" Value="13" />
<Setter Property="Foreground" Value="{x:Static common:WPFColors.DESCRIPTION_FOREGROUND_BRUSH}" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="TextBlock.TextWrapping" Value="WrapWithOverflow" />
<Style.Resources>
<Style TargetType="ContentPresenter">
<Style.Resources>
<Style TargetType="TextBlock">
<Setter Property="TextWrapping" Value="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type ToolTip}},Path=(TextBlock.TextWrapping),Mode=OneWay}"/>
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
XAML:
<grid:GridCell ToolTip="{Binding Path=PaymentTypeToolTip,Mode=OneWay}">...</grid:GridCell>
But everything works if I write like this:
<grid:GridCell>
<grid:GridCell.ToolTip>
<ToolTip Content="{Binding Path=PaymentTypeToolTip,Mode=OneWay}">
<ToolTip.Style>
<Style TargetType="ToolTip" BasedOn="{StaticResource {x:Type ToolTip}}">
<Setter Property="TextBlock.TextWrapping" Value="NoWrap"/>
</Style>
</ToolTip.Style>
</ToolTip>
</grid:GridCell.ToolTip>
...
</grid:GridCell>
This error appeared only on WinXP and Win7, only on one window, on one control, which works fine in other places.
Why could this be? Writing style to ToolTip and TextWrapping = NoWrap is not an option everywhere.
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>
I am having an issue trying to make use of the BasedOn attribute of Xaml styles. I created a fairly simple style as an example.
The project consists of two main files. MainWindow.xaml and SquareButtonStyle.xaml. SquareButtonStyle makes use of the FontAwesome.WPF project to quickly get some images.
MainWindow is basically a series of buttons with an image inside it and some text.
The goal of this example is to have three different button sizes. A "medium" size, and two variants, "small" and "large", based on the medium size.
The problem is most easily seen with the large variant. The center TextAlignment, Margin and Red text color set from the Medium style, which the large is based on, is lost. It seems that instead of inheriting the style and only override the specific property I am instead inheriting the default style and overriding the property.
What am I doing wrong? It seems the only way to correct this is to not bother with BasedOn, and just make three separate styles with the full list of properties being set. Is there a way to get around this?
SquareButtonStyle.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="Button" x:Key="SquareButtonMediumStyle">
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Style.Resources>
<Style TargetType="StackPanel">
<Setter Property="Orientation" Value="Vertical" />
<Style.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="12" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Foreground" Value="Red"></Setter>
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonSmallStyle">
<Setter Property="Width" Value="55" />
<Setter Property="Height" Value="55" />
<Style.Resources>
<Style TargetType="StackPanel">
<Style.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="10" />
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Style.Resources>
<Style TargetType="StackPanel">
<Style.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="14" />
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
</ResourceDictionary>
MainWindow.xaml
<Window x:Class="XamlStyleExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="SquareButtonStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<StackPanel>
<WrapPanel>
<WrapPanel.Resources>
<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" />
</WrapPanel.Resources>
<Button>
<StackPanel>
<TextBlock>Button 1</TextBlock>
</StackPanel>
</Button>
<Button>
<StackPanel>
<TextBlock>Button 2</TextBlock>
</StackPanel>
</Button>
<Button>
<StackPanel>
<TextBlock>Button 3</TextBlock>
</StackPanel>
</Button>
</WrapPanel>
<WrapPanel>
<WrapPanel.Resources>
<Style BasedOn="{StaticResource SquareButtonSmallStyle}" TargetType="Button" />
</WrapPanel.Resources>
<Button>
<StackPanel>
<TextBlock>Button 1</TextBlock>
</StackPanel>
</Button>
<Button>
<StackPanel>
<TextBlock>Button 2</TextBlock>
</StackPanel>
</Button>
<Button>
<StackPanel>
<TextBlock>Button 3</TextBlock>
</StackPanel>
</Button>
</WrapPanel>
<WrapPanel>
<WrapPanel.Resources>
<Style BasedOn="{StaticResource SquareButtonLargeStyle}" TargetType="Button" />
</WrapPanel.Resources>
<Button>
<StackPanel>
<TextBlock>Button 1</TextBlock>
</StackPanel>
</Button>
<Button>
<StackPanel>
<TextBlock>Button 2</TextBlock>
</StackPanel>
</Button>
<Button>
<StackPanel>
<TextBlock>Button 3</TextBlock>
</StackPanel>
</Button>
</WrapPanel>
</StackPanel>
</Window>
Update
Based Upon a few answers I came up with a solution, but I don't particularly like it. It seems messy.
I now have two keyed styles. One for the StackPanel and one for the TextBlock.
MainWindow.Xaml stays the same but SquaredButtonStyle.xaml now has:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="TextBlock" x:Key="SpecialTextBlockStyle">
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Foreground" Value="Red" />
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
<Style TargetType="StackPanel" x:Key="MediumNestedStackPanel">
<Style.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource SpecialTextBlockStyle}" />
</Style.Resources>
</Style>
<Style TargetType="Button" x:Key="SquareButtonMediumStyle">
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Style.Resources>
<Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
</Style>
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonSmallStyle">
<Setter Property="Width" Value="55" />
<Setter Property="Height" Value="55" />
<Style.Resources>
<!--
Implicit stack panel style in the scope of SquareButtonMediumStyle
inherits from MediumNestedStackPanel, adds stuff
-->
<Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
<Style.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource SpecialTextBlockStyle}" >
<Setter Property="FontSize" Value="10" />
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Style.Resources>
<Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
<Style.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource SpecialTextBlockStyle}">
<Setter Property="FontSize" Value="14" />
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
</ResourceDictionary>
Those nested StackPanel styles aren't going to be involved in the BasedOn inheritance for their containing styles. If you want to do that, you'll have to set up a separate inheritance hierarchy for the nested styles:
<Style TargetType="StackPanel" x:Key="MediumNestedStackPanel">
<Setter Property="Orientation" Value="Vertical" />
<Style.Resources>
<Style TargetType="fa:ImageAwesome">
<Setter Property="Height" Value="35" />
<Setter Property="Margin" Value="5" />
</Style>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="12" />
<Setter Property="TextAlignment" Value="Center" />
<Setter Property="Foreground" Value="Red"></Setter>
<Setter Property="TextWrapping" Value="Wrap" />
</Style>
</Style.Resources>
</Style>
<Style TargetType="Button" x:Key="SquareButtonMediumStyle">
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Style.Resources>
<!--
Implicit stack panel style in the scope of SquareButtonMediumStyle
inherits from MediumNestedStackPanel, adds nothing
-->
<Style
TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}"
/>
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonSmallStyle">
<Setter Property="Width" Value="55" />
<Setter Property="Height" Value="55" />
<Style.Resources>
<!--
Implicit stack panel style in the scope of SquareButtonMediumStyle
inherits from MediumNestedStackPanel, adds stuff
-->
<Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
<Style.Resources>
<Style TargetType="fa:ImageAwesome" BasedOn="{StaticResource {x:Type fa:ImageAwesome}}">
<Setter Property="Height" Value="20" />
</Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="FontSize" Value="10" />
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Style.Resources>
<Style TargetType="StackPanel" BasedOn="{StaticResource MediumNestedStackPanel}">
<Style.Resources>
<Style TargetType="fa:ImageAwesome" BasedOn="{StaticResource {x:Type fa:ImageAwesome}}">
<Setter Property="Height" Value="60" />
<Setter Property="Margin" Value="5" />
</Style>
<Style TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="FontSize" Value="14" />
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
Instead of defining an implicit TextBlock style inside the Button style(s), you should set the FontSize, Foreground, ... properties of the Button element itself:
<Style TargetType="Button" x:Key="SquareButtonMediumStyle">
<Setter Property="Margin" Value="5" />
<Setter Property="Width" Value="80" />
<Setter Property="Height" Value="80" />
<Setter Property="FontSize" Value="12" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Foreground" Value="Red"></Setter>
<Setter Property="TextBlock.TextWrapping" Value="Wrap" />
<Style.Resources>
<Style TargetType="StackPanel">
<Setter Property="Orientation" Value="Vertical" />
</Style>
</Style.Resources>
</Style>
<Style BasedOn="{StaticResource SquareButtonMediumStyle}" TargetType="Button" x:Key="SquareButtonLargeStyle">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="FontSize" Value="14" />
</Style>
Your current approach of using implicit styles for the TextBlocks won't work as you have already discovered. Please refer to the following link for more information about why:
Wpf, style is not being applied
I have a <ResourceDictionary> containing this:
<Style TargetType="TextBlock">
<Setter Property="FontFamily" Value="..\..\Fonts\#Roboto"/>
<Setter Property="FontSize" Value="14"/>
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
This works fine.
Now I've added another style:
<Style x:Key="MyText" TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontWeight" Value="SemiBold"/>
</Style>
However, after changing my <TextBlock> to <TextBlock Style="{StaticResource MyText}"/> - only the styles within the 2nd style block are picked up. E.g. the FontFamily, FontSize and TextWrapping are now ignored.
How can I have a default for a TextBlock, and then add to it? I don't want to add an x:Key to the 'default' style as this is in use throughout the system already.
I think you just need to base your keyed style on the type. See example below.
Note the BasedOn="{StaticResource {x:Type TextBlock}}"
<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="14"/>
<Setter Property="Foreground" Value="Green" />
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
<Style x:Key="MyText" TargetType="TextBlock">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontWeight" Value="SemiBold"/>
</Style>
<Style x:Key="MyAppendedStyles" TargetType="TextBlock" BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="FontWeight" Value="SemiBold"/>
</Style>
</Window.Resources>
<StackPanel>
<TextBlock Text="Hello" />
<TextBlock Style="{StaticResource MyText}" Text="Style Key" />
<TextBlock Style="{StaticResource MyAppendedStyles}" Text="Style Key" />
</StackPanel>
I have few problem with DataGrid style.
I need it change two corners, when I try to do that by example my data disappear, its possible do that with my code?
My code is:
...<Style TargetType="{x:Type DataGrid}">
<Setter Property="Background" Value="#FFFFFF"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="#E6E6E6"/>
</Style>
<DataGridTextColumn x:Key="price" Header="Price, € " FontFamily="Arial" Width="0.3*" Binding="{Binding adress}" IsReadOnly="True"
FontSize="18" FontWeight="Normal" Foreground="#4D4D4D">
<DataGridTextColumn.ElementStyle>
<Style TargetType="TextBlock">
<Setter Property="Width" Value="25"/>
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Right"/>
</Style>
</DataGridTextColumn.ElementStyle>
<DataGridTextColumn.HeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="#FFFFFF"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="#E6E6E6"/>
<Setter Property="Height" Value="35"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="IsEnabled" Value="False"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
<Style TargetType="DataGridCell">
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<Trigger Property="DataGrid.IsSelected" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#FFD65E" />
<Grid>
<DataGrid x:Name="lbPersonList" Margin="30,98,362,30" AlternationCount="2" VerticalScrollBarVisibility="Visible" AutoGenerateColumns="False"
RowHeight="42" GridLinesVisibility="None" HorizontalGridLinesBrush="#E6E6E6" CanUserAddRows="False"
HeadersVisibility="Column" >
<DataGrid.Columns>
<StaticResource ResourceKey="product"/>
<StaticResource ResourceKey="unit price"/>
<StaticResource ResourceKey="quantity"/>
<StaticResource ResourceKey="price"/>
</DataGrid.Columns>
</DataGrid>
2.
How to remove this empty field, I removed last row so this empty field is not row ?
You have to edit the default ControlTemplate of DataGrid by adding <Border> to the root grid control
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border x:Name="Border" CornerRadius="13" Background="#232323" SnapsToDevicePixels="True"/>
<Grid>
........
.......
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
you can find the default ControlTemplate of DataGrid at
https://msdn.microsoft.com/en-us/library/cc278066(v=vs.95).aspx
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.