We Keep Coding

How to use the Windows 8 default style (Xaml) in an Outlook plugin

I'm currently creating an Outlook Plugin that has a settings window. The settings window will look like the account setting window in Outlook 2013.
I'm creating this plugin for Outlook on a Windows 8.1 machine.
Now, when you create an Outlook Plugin you can add a form, but this is a Windows Form, which is not good for me. Therefore I've searched on how to create a WPF window for an Outlook Plugin, and basiccly, you choose to add an XAML UserControl, of which the source code will look like:
<UserControl x:Class="OutlookAddIn1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
</Grid>
</UserControl>
Now, you can easily create a Window from this by changing UserControl to Window. Also, you need to inherit from the Base class Window in the code behind.
The source will then look like:
<Window x:Class="OutlookAddIn1.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
</Grid>
</Window>
Now, I'll add a button on the WPF Window / UserControl which I've just created.
When you run the application and opens up the just created window, you'll see the following:
It's working and I see a button, but in order to be consistent, I would like my button, and all the future controls to have the same look as the controls on my native Windows environment (Windows 8.1).
Here's a screenshot from the default Windows Style on Windows 8.1
As you can see, there's definitely a change between my implementation and the default windows implementation.
So, the question to make it very short: In an Outlook plugin, how do you create your applications so that the style of the controls matches the same style as the Windows controls?
I've searched already a lot on the net, but can't find a solid solution.
It seems that the style in Windows 8 is called Aero2.
I do find a reference to Aero2 in the following locations:
C:\Program Files (x86)\Microsoft Visual Studio 12.0\Blend\SystemThemes\Wpf
Here I do find a lot of Xaml files.
C:\Windows\Microsoft.NET\Framework64\v4.0.30319\WPF
In here, there's a reference dll named: 'PresentationFramework.Aero2.dll'
Can someome explain me on how I could accomplish this. It would be great because I want my addin to have the same style as the default Windows style.

After searching a lot, I've found out that WPF comes with it's own styles that are not linked to Windows at all.
So, the only solution would be to create your own custom controls.
So, I've done that, and here is a very first, very basic version. Which does not relies on input parameters at all.
It was just a demo on how to style a button to have the default Windows 8.1 look:
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
<Border x:Name="buttonBaseBorder" BorderBrush="#ACACAC" BorderThickness="1" SnapsToDevicePixels="True">
<Grid x:Name="buttonBase" Width="84" Height="22" VerticalAlignment="Center">
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#F0F0F0" Offset="0" />
<GradientStop Color="#E5E5E5" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Label HorizontalContentAlignment="Center" Foreground="Black" Width="84" Content="{TemplateBinding Content}" Padding="0" Margin="0" VerticalContentAlignment="Center" />
</Grid>
</Border>
<!-- Set the triggers that are needed for the button. -->
<ControlTemplate.Triggers>
<!-- Trigger for mouse over on the button. -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="buttonBase" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#ECF4FC" Offset="0.0" />
<GradientStop Color="#DCECFC" Offset="1.0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="buttonBaseBorder" Property="BorderBrush" Value="#7EB4EA" />
</Trigger>
<!-- Trigger for when the button is the default one. -->
<Trigger Property="IsDefault" Value="True">
<Setter TargetName="buttonBaseBorder" Property="BorderBrush" Value="#3399FF" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

How to crop ListBoxItem's content and fit it to ListBox

Sometimes content of my ListBoxItem is wider than the listbox, so it is cropped by ListBox. That is fine but the gradient background of ListBoxItem is not stretched to the listbox width but to the width of ListBoxItem's content. With the code below I am trying to force gradient to be edge-to-edge of ListBox. ListBox has dynamic width so I can not predefine ListBoxItem's width. What am I missing?
<Style x:Key="MyListbox" TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
and
<DataTemplate DataType="{x:Type local:MyData}" >
<Grid HorizontalAlignment="Stretch" >
<Style TargetType="{x:Type Grid}">
...
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="#ffffff" Offset="0"/>
<GradientStop Color="#000000" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>

I'm not entirely certain it's the effect you're going for, but you could try adding this to your Grid in the DataTemplate.
<Grid Width="{Binding Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}}">
Essentially it's trying to locate the ListBox parent, and if successful, will grab the Width property, which will ensure your ListBoxItems are all of the same width (that of the ListBox). That worked for me in a quick test project.
If what you're after is just a simple gradient from edge to edge on the ListBox itself, you should be able to get that effect by styling the ListBox background and giving the ListBoxItems transparent backgrounds. I assumed you just wanted the gradient on the ListBoxItems.

Custom GridViewItem Selection - Windows Store App C#/XAML

I'm trying to change the style of selecting items in a gridview. Below the code I'm using in StandardStyles.xaml:
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="Transparent"/>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Opacity="0.25" Color="Blue"/>
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBackgroundThemeBrush" Opacity="0.7" Color="Blue"></SolidColorBrush>
<SolidColorBrush x:Key="ListViewItemSelectedPointerOverBorderThemeBrush" Color="Blue"/>
But I need what the border with the selected icon stay with some style and the background transparent, like this:
Selected Image Style
Could someone help me?

When I use a rectangle in StandardStyles.xaml beneath each GridViewItem the custom selection works.
<DataTemplate x:Key="MyTemplete">
<Grid HorizontalAlignment="Left" Background="Transparent">
<Rectangle>
<Rectangle.Fill>
<SolidColorBrush Color="White" Opacity="1"/>
</Rectangle.Fill>
</Rectangle>
...
</Grid>
</DataTemplate>

Use the code below to set the style of a selected item. It will set the border color, the text color and the check icon color.
<SolidColorBrush x:Key="ListViewItemSelectedBackgroundThemeBrush" Color="#323232"></SolidColorBrush>
<SolidColorBrush x:Key="ListViewItemSelectedForegroundThemeBrush" Color="White"></SolidColorBrush>
<SolidColorBrush x:Key="ListViewItemCheckThemeBrush" Color="White"></SolidColorBrush>
Regards.

TopAppBar button AutomationProperties styling in a Windows Store app

Is it possible to style the AutomationProperties.Name value with a different color?
I get the basic text color from the dark theme in my app. I have a custom background color and thats why I need a specific ForegroundColor and TextColor for this attribute (Value="OtherUserAppBarButton")
<Style x:Key="LogoutAppBarButtonStyle" TargetType="ButtonBase"
BasedOn="{StaticResource AppBarButtonStyle}">
<Setter Property="AutomationProperties.AutomationId" Value="OtherUserAppBarButton"/>
<Setter Property="AutomationProperties.Name" Value="Other User"/>
<Setter Property="Content" Value=""/>
<Setter Property="Foreground" Value="#ffffffff" />
</Style>
Has somebody an idea?

To achieve that you will need to modify AppBarButtonStyle which you are basing your button style on. You can find it in Common\StandardStyles.xaml inside your project. You can either modify the style in this file directly or create a copy of it inside App.xaml if you need the unmodified style as well.
You need to change the following block inside the style's ControlTemplate:
<TextBlock
x:Name="TextLabel"
Text="{TemplateBinding AutomationProperties.Name}"
Foreground="{StaticResource AppBarItemForegroundThemeBrush}"
Margin="0,0,2,0"
FontSize="12"
TextAlignment="Center"
Width="88"
MaxHeight="32"
TextTrimming="WordEllipsis"
Style="{StaticResource BasicTextStyle}"/>
As you can see the Foreground property is fixed to AppBarItemForegroundThemeBrush. You can change it to {TemplateBinding Foreground} for it to match the color you set in LogoutAppBarButtonStyle or you can give it another custom fixed color directly in the template.
Also don't forget about the styles for other visual states (PointerOver, Pressed, Disabled and Checked). They are also set to theme colors. You can change them inside the VisualStateManager for the template

WPF-ContextMenu - how to Disable background change on mouse over or focus

its my first question in StackOverFlow ,
I have a text box , when clicking on,it shows a context menu , I have some control (user control or ..) in context menu.
everything is ok except in mouse over , all my controls get focus and their background change to blue , its so awful,
another problem , in context menu , there is an vertical line , and an Icon place in left of it , How Can I remove it ?
C# code :
private void textBox1_GotMouseCapture(object sender, MouseEventArgs e)
{
textBox1.ContextMenu.PlacementTarget = textBox1;
textBox1.ContextMenu.IsOpen = true;
textBox1.Focus();
}
and XAML Code :
<TextBox Height="23" HorizontalAlignment="Left" Margin="12,55,0,0"
Name="textBox1" VerticalAlignment="Top"
Width="120" MouseDown="textBox1_MouseDown"
GotMouseCapture="textBox1_GotMouseCapture"
ContextMenuService.HasDropShadow="False"
ContextMenuService.ShowOnDisabled="True"
TextChanged="textBox1_TextChanged">
<TextBox.ContextMenu>
<ContextMenu Name="ctm" Placement="Relative"
Focusable="False" HasDropShadow="False"
VerticalOffset="23" HorizontalOffset="0">
<StackPanel Margin="0" >
<TextBox Text="testing..." Name="testing"></TextBox>
</StackPanel>
</ContextMenu>
</TextBox.ContextMenu>
</TextBox>
thanks to all .

one way to solve your "color" problem. you can override the systemcolors to get the behavior you want.
just choose the SystemColor you need to override.
<ContextMenu>
<ContextMenu.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="LightBlue"/>
</ContextMenu.Resources>
EDIT:
i use the following for my contextmenu to set the selectioncolor to transparent and the selected item to green foreground.
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="DarkGreen"/>