Develop Reference

How to re-position adorner when resizing the window?

I have an adorner to show error messages, and the problem is the message get clipped under the window, when the window is small.
So I'm trying to re-position the adorner to button or left according to the window size, or if the user resized the window.
textbox:
<TextBox IsReadOnly="False" Grid.Column="3" Grid.Row="0" Text="{Binding TextValue}" />
style:
<ControlTemplate x:Key="errorToolTipTemplate">
<ControlTemplate.Resources>
<Style x:Key="textblockErrorTooltip" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Margin" Value="10 0 10 0" />
</Style>
</ControlTemplate.Resources>
<DockPanel LastChildFill="true">
<Border Height="Auto" Margin="4,0,0,0" Background="Tomato" BorderBrush="Black" BorderThickness="1" CornerRadius="2" DockPanel.Dock="Right">
<TextBlock Style="{StaticResource textblockErrorTooltip}" Text="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}" />
</Border>
<AdornedElementPlaceholder Name="customAdorner">
<Border BorderBrush="Red" BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Width" Value="120" />
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Margin" Value="0,2,4,2" />
<Setter Property="Validation.ErrorTemplate" Value="{DynamicResource errorToolTipTemplate}" />
<!--<Setter Property="FontSize" Value="8" />-->
<Setter Property="Background" Value="{DynamicResource entryFieldsBrush}" />
<Style.Triggers>
<Trigger Property="IsReadOnly" Value="True">
<Setter Property="Background" Value="{StaticResource windowBrush}" />
</Trigger>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding Path=(Validation.Errors)[0].ErrorContent, RelativeSource={x:Static RelativeSource.Self}}" />
</Trigger>
</Style.Triggers>
</Style>

Using popups was the way to go for me. this link here has a working example of a popup error message.
The Popup control provides a way to display content in a separate
window that floats over the current application window relative to a
designated element or screen coordinate. This topic introduces the
Popup control and provides information about its use.
source

How to set one content to several buttons in WPF

I have some buttons -in different windows- that have the same content. But if two windows surfaced together,out of the first window's button content disappears.
Buttons Style is :
<Style TargetType="{x:Type Button}" x:Key="BSaveBtn">
<Setter Property="Padding" Value="5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="68"/>
<Setter Property="Background" Value="{DynamicResource FlatGreen}"/>
<Setter Property="Template" Value="{DynamicResource FlatGreenBtnHover}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
<Image Width="30" Source="/login;component/img/buttonpic/save.png"/>
<TextBlock Text="save" FontSize="16" FontFamily="/login;component/fonts/#Droid Arabic Kufi" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>
button Code in windows is :
<Button Style="{DynamicResource BSaveBtn}" Template="{DynamicResource FlatGreenBtnHover}" />
problems occurs only with content -not another style properties- .

Seems to work fine for me when I tested it here.
A few things I noticed though that may help. You don't need them to be DynamicResource, they should really be StaticResource unless you plan on modifying them.
I assume you are declaring these in the Windows.Resource section or repeating them on each window?
If so you should centralize those to a ResourceDictionary.
Create a new Resource Dictionary put your style in there like so:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Button}" x:Key="BSaveBtn">
<Setter Property="Padding" Value="5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="68"/>
<Setter Property="Background" Value="{DynamicResource FlatGreen}"/>
<Setter Property="Template" Value="{DynamicResource FlatGreenBtnHover}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
<Image Width="30" Source="/login;component/img/buttonpic/save.png"/>
<TextBlock Text="save" FontSize="16" FontFamily="/login;component/fonts/#Droid Arabic Kufi" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Then in your App.xaml put the following:
<ResourceDictionary>
<ResourceDictionary Source="MyResources.xaml" />
</ResourceDictionary>
The Image should really be in a dictionary to avoid loading it multiple times. Just add a line in that ResourceDictionary like so:
<BitmapImage UriSource="/login;component/Images/Save.png" x:Key="Save" PresentationOptions:Freeze="True" />
Setting the PresentationOptions:Freeze will also help if the image is never being modified.
Your call to the image would then change to be:
<StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
<Image Width="30" Source="{StaticResource Save}"/>
<TextBlock Text="save" FontSize="16" FontFamily="/login;component/fonts/#Droid Arabic Kufi" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>
Once your resources are centralized in a ResourceDictionary (or multiple) it makes it easy to apply those same styles anywhere in your application and hopefully will help with your issue. If not please give more info on the problem you have such as sample code to make the issue happen please.

An instance of an element can only appear once in the visual tree. You can set the x:Shared attribute of the Style to False in order for a new instance of the StackPanel to get created for each Button to which you apply the style:
<Style TargetType="{x:Type Button}" x:Key="BSaveBtn" x:Shared="False">
<Setter Property="Padding" Value="5"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Width" Value="70"/>
<Setter Property="Height" Value="68"/>
<Setter Property="Background" Value="{DynamicResource FlatGreen}"/>
<Setter Property="Template" Value="{DynamicResource FlatGreenBtnHover}"/>
<Setter Property="Margin" Value="5"/>
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Vertical" FlowDirection="RightToLeft">
<Image Width="30" Source="/login;component/img/buttonpic/save.png"/>
<TextBlock Text="save" FontSize="16" FontFamily="/login;component/fonts/#Droid Arabic Kufi" Foreground="White" HorizontalAlignment="Center"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>

Create Border-Style with integrated TextBox

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>

Remove Listview mouse over

I have a simple list view.
<ListView x:Name="DatabasesLstVw" ItemsSource="{Binding Path=Issues}"
ItemContainerStyle="{StaticResource removeMouseOverStyle}"
AlternationCount="2" Grid.Row="1" Margin="20,10,20,0"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
FontSize="12" FontWeight="Normal"
BorderThickness="0" Background="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.Resources>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</ListView.Resources>
<ListView.View>
<GridView >
<GridViewColumn Header="Message">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock TextWrapping="Wrap" Text="{Binding Name}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
I have created a style trying to remove the default mouse over and select styling.
<Style x:Key="removeMouseOverStyle" TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0,0,0,0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="FontSize" Value="12"/>
</Trigger>
<Trigger Property="ItemsControl.IsMouseOver" Value="true">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Normal"/>
</Trigger>
</Style.Triggers>
</Style>
I cant post what its doing without trying to create a gif picture of it. Basically its hopping a little with the mouse over. First I thought it was setting margin , then tried padding and font size.
What exactly is this default mouse over doing and how do I remove it?

There could be many ways how they could have implemented selection\mouse over. For example often it is done by showing separate Border for every state. For control such simple as ListViewItem it's better to override it's ControlTemplate and do what you need there. You can use default control template, just remove triggers:
<Style x:Key="removeMouseOverStyle"
TargetType="ListViewItem">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border"
Padding="2"
SnapsToDevicePixels="true"
Background="Transparent">
<GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
With this style items won't change their appearence on selection or mouse over. Also, you can use base ItemsControl control - it does not have selection\mouse over behavior by default.

How to change Modern UI menu text to uppercase

I am using Modern UI with WPF to create a project. Main menu items appears to be lowercase, which is the one thing on theme I want to change. Is there any way to change it from my project's MainWindow.xaml or MainWindow.xaml.cs or any other file?
My code for menu is:
<mui:LinkGroup DisplayName="Home" >
<mui:LinkGroup.Links>
<mui:Link DisplayName="Dashboard" Source="/Pages/home.xaml" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
FYI, I can change it from theme's code and build a new FirstFloor.ModernUI.dll file and use it. But that's not what I want, it will not be effective if I cannot override it after using one .dll. There must be a way, I must have missed it.
UPDATE
I have an image of the display window.
I do not have problem with DASHBOARD but what I want to do is change home to uppercase, or how I write on xaml code.

If you look at the source code for the MUI project there is a theme called ModernMenu.xaml (under Themes in the FirstFloor.ModernUI project).
You can simply add a style to your own application like the following. (I removed the converter that sets the text to lowercase and increased the spacing between first-line menu options so options that have more than one word are clearly separated from neighbouring options.)
<Style TargetType="controls:ModernMenu">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="controls:ModernMenu">
<Grid>
<Grid.Resources>
<Style TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="16" />
</Grid.RowDefinitions>
<ListBox ItemsSource="{TemplateBinding VisibleLinkGroups}"
SelectedItem="{Binding SelectedLinkGroup, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="FontFamily" Value="Segoe UI Light" />
<Setter Property="Foreground" Value="{DynamicResource MenuText}" />
<Setter Property="FontSize" Value="23"/>
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="TextOptions.TextFormattingMode" Value="Ideal" />
<Setter Property="Margin" Value="0,0,25,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<TextBlock DataContext="{TemplateBinding Content}"
Text="{Binding DisplayName}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="{DynamicResource MenuTextHover}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Foreground" Value="{DynamicResource MenuTextSelected}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
<ListBox Grid.Row="1"
ItemsSource="{Binding SelectedLinkGroup.Links, RelativeSource={RelativeSource TemplatedParent}}"
SelectedItem="{Binding SelectedLink, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
VerticalAlignment="Top">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="FontFamily" Value="Segoe UI" />
<Setter Property="Foreground" Value="{DynamicResource SubMenuText}" />
<Setter Property="FontSize" Value="11"/>
<Setter Property="Margin" Value="0,0,12,0" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid DataContext="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" TextAlignment="Center"/>
<TextBlock Text="{Binding DisplayName, Converter={StaticResource ToUpperConverter}}" FontWeight="Bold" Visibility="Hidden" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="{DynamicResource SubMenuTextHover}"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Foreground" Value="{DynamicResource SubMenuTextSelected}"/>
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To do this you need a reference to the namespace at the top of your XAML file:
xmlns:controls="clr-namespace:FirstFloor.ModernUI.Windows.Controls;assembly=FirstFloor.ModernUI"
That should do the trick.

I have got the same problem metioned in the description above.
It seems to be that the ModernMenu which contains the links converts the DisplayName value to lower case.
With the help of Blend i found out that the basic ControlTemplate contains a TextBlock with a binding to the DisplayNameProperty.
<TextBlock.Text>
<Binding Path="DisplayName">
<Binding.Converter>
<mui:ToLowerConverter/>
</Binding.Converter>
</Binding>
</TextBlock.Text>
To solve this problem i have created a new ControlTemplate for the ModernMenu based on the basic ModernMenu ControlTemplate but without the BindingConverter.
Unfortunately this solution does not work because the whole control is not visible or get not painted when i define a custom ControlTemplate.
In my opinion there is no way at the moment to change the the Style of the DisplayNameProperty easily.. I spent a lot of hours to find a solution for the problem and every try failed in sprout..
Maybe a custom control which inherits from the ModernMenu and a new ControlTemplate based on the ModernMenu without that converter will be work..
I will test it in the next few days and post my experience with this attemp.