Develop Reference

WPF Tabcontrol TabItem display issue on Windows Classic theme

I have come across an annoying issue in a WPF development (.net 3.5 sp1) I have been undertaking which involves showing some Tabs down the side (and rotated) on my interface.
I have been developing on a Windows 7 machine with the normal Aero theme and the tabs look fine
When we deployed to the customer, their machines are set on "Windows Classic" theme and the tabs show as
So they are all 'squashed' and don't display the text. If I switch my machine to Windows Classic then I am able to reproduce. I looked at the interface with WPF Inspector and could see some padding values that shouldn't be there
If I change the padding values to 0 using WPF Inspector, then the tabs start showing correctly again !! I have set the padding to be 0 on the template I have for this, but it doesn't seem to be having any affect
<TabControl TabStripPlacement="Left"
SelectedIndex="{Binding CurrentTabIndex}"
ItemsSource="{Binding CurrentPassengers}">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Padding"
Value="0" />
<Setter Property="Margin"
Value="0" />
<Setter Property="Width"
Value="26.5" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<ContentPresenter Content="{Binding NameInGDSFormat}">
<ContentPresenter.LayoutTransform>
<RotateTransform Angle="-90" />
</ContentPresenter.LayoutTransform>
</ContentPresenter>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.ContentTemplate>
<!-- Lots of stuff in here for the Content Template -->
</TabControl.ContentTemplate>
</TabControl>
I have tried setting various templates, padding on various elements but nothing seems to change - so does anyone know how I can fix this ?
EDIT: If I remove the 'width' that is set, then it does actually show in Windows Classic - but the tab is very WIDE.

OK - so in the end I had to create a whole new ControlTemplate to fix the issue :)
Basically I found the following within the original Classic ControlTemplate
<ContentPresenter RecognizesAccessKey="True"
Content="{TemplateBindingReaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedContentControl.HeaderStringFormat}"
ContentSource="Header"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="{TemplateBinding Control.Padding}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
So someone thought it a good idea to bind the Margin to the Padding and then when you place the Tabs on the left (or right) the template further added
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelected">
<Condition.Value>
<s:Boolean>True</s:Boolean>
</Condition.Value>
</Condition>
<Condition Property="TabItem.TabStripPlacement" Value="{x:Static Dock.Left}"/>
</MultiTrigger.Conditions>
<Setter Property="Control.Padding">
<Setter.Value>
<Thickness>11,2,14,2</Thickness>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.Margin">
<Setter.Value>
<Thickness>-2,-2,-2,-2</Thickness>
</Setter.Value>
</Setter>
</MultiTrigger>
So they set the Padding to 11,2,14,2 (the values I was seeing in WPF Inspector).
So I had to override the Template, set the Margin to something sensible and then set the padding to more realistic values that could handle the content presenter being rotated 270 degrees :)
Hope this helps someone else who comes across this !!

How to change default mouse hover behavior on dynamically generated buttons

I am a relatively new user of WPF and have run into a problem regarding dynamic Button generation and Buttons' default hover properties.
I am currently working on an application where a significant number of buttons are being generated on a Canvas in the code behind. The contents of each button are unique images referenced by an array of objects containing Uri strings. This array is populated by reading in a file containing these Uri strings, so the number and placement of buttons on this canvas vary based on which file is being read.
For the most part, the appearance of the Canvas when the application runs is what was intended, however hovering over any of the Buttons replaces the image with the default blue background for the duration that the mouse overlaps.
Here is an example of the code that I am using to generate the buttons:
exampleButton = new Button { Content = "Name", Width = 50, Height = 65, Background = new ImageBrush(new BitmapImage(new Uri(#object.UriString, UriKind.Relative))) };
exampleButton.Style = exampleStyle;
exampleCanvas.Children.Add(exampleButton);
Please understand that I have omitted pieces of code irrelevant to my question.
Here is an example of the style that was used, also in the code behind:
exampleStyle = new Style(typeof(Button));
exampleStyle.Setters.Add(new Setter(Button.ForegroundProperty, Brushes.Transparent));
exampleStyle.Setters.Add(new Setter(Button.BorderBrushProperty, Brushes.Transparent));
Together these achieve the effect I am trying to create, barring hover behavior.
So far I have tried appending ControlTemplate overrides into the style declaration but am unsure of how that translates from XAML to the C# code behind. I have also tried creating and binding button templates created in the XAML but I haven't had success in finding explanations or tutorials that apply to my situation.
Any help to accomplish this via the code behind would be greatly appreciated. Of course, if I'm doing this really unconventionally and there is a more standard way of doing things I am all ears.
EDIT:
This is the XAML I am using to declare the style that my dynamically generated buttons are using.
<Style x:Key="MySuperButtonStyle" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="65" />
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Black"/>
</Trigger>
</Style.Triggers>
</Style>
Using this call to assign the style in the code behind:
exampleButton.Style = (Style)FindResource("MySuperButtonStyle");

This is happening because the default Button control style has a trigger that changes the Background property of the button when the mouse hovers over it. You need to use a custom style for the button:
<Style x:Key="MySuperButtonStyle" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="65" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here the width and the height are set using the style, so you no longer need to set those properties in code. The control template has been changed so it consists only of a Border element with the content inside of it. There are no triggers at all, so the button won't change its appearance when clicked or hovered over.
In your code all you need to do is obtain a reference to this style then assign that to the Style property when you are creating the button.
Having said all this, in WPF you rarely need to create controls in code. Instead you should really be using the MVVM (Model-View-ViewModel) pattern and data binding. You probably shouldn't be creating styles and setters in code either.

How to display button flyout in call out style, windows 8 xaml c#?

I have an info button in my windows 8 app, when I click on that button I have to display the information in call out style. In silverlight controls I have found call out controls, but how can I achieve in my windows 8 xaml c# app?
Here is my xaml code:
<Button Style="{StaticResource infoButtonStyle}"
>
<Button.Flyout >
<Flyout Placement="Right" >
<StackPanel >
<TextBlock Width="280" Text="This is a detailed description" FontSize="16"
FontWeight="SemiLight" FontFamily="Segoe UI" TextWrapping="Wrap"
Margin="0,0,0,10" />
</StackPanel>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.ZoomMode" Value="Enabled"/>
<Setter Property="Background" Value="White"/>
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="MinHeight" Value="100"/>
<Setter Property="MinWidth" Value="300"/>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Button.Flyout>
</Button>

A few libraries on the web, provides a "Flyout" control that you can use.
The difference between winrt and your current code, is that you will have to create a Flyout control, then open it, using the "Click" event, or a command binding, on the button you want to use to achieve that.
The syntax will be slightly different, but you can find plenty of examples.
Take a look at the Callisto Winrt controls, and you will find what you're looking for.

How to access a styles resources and retrieve an inner style that doesn't have a key

I have a style for a stack panel which has a key, within the stack panel I have buttons which have a default style set via the stack panel's Style > Resources > Styles, for this reason the buttons style is not set via a key but instead is set as it is a child of the stack panel! I'm sure this is a little tricky to understand as it sure feels tricky to explain... here is the style code...
<Style x:Key="VerticalMenuPanel" TargetType="{x:Type StackPanel}">
<Setter Property="Background" Value="#115e9a" />
<Style.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Margin" Value="0,0,0,0" />
<Setter Property="Foreground" Value="White" />
<Setter Property="FontSize" Value="13" />
<Setter Property="FontFamily" Value="Calibri" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Height" Value="27" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderBrush="White" BorderThickness="0,0,0,1">
<Border BorderBrush="#0160a2" BorderThickness="0,0,0,1.5">
<ContentPresenter VerticalAlignment="Center" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
</Style>
So, basically, without getting into what I'm doing too much I require the need to change the style of the buttons within the stack panel based on certain events. In order to change the style I simply find the resource based on the style key! HOWEVER here is my problem, I can't reset the style back to the "default" style provided by the parent the "VerticalMenuPanel"s Style.Resources as I don't know how to retrieve the style without having a definitive key for it. The obvious thing to do would be to give the button style a key but then I would have to explicitly define the style for all of the buttons instead of the style being applied by default as it is a child of the stack panel!
The bottom line is how do I retrieve a style without a key from within a parent styles resources (programatically)? Obviously I can retrieve the parent style via its key.
I hope you understand the issue I am having, and please feel free to let me know if I can explain anything better, add more clarity or if you wish edit the post yourself :)

When the Key is not provided for a style, the TargetType becomes the key of that style.
Here is an example:
<Grid x:Name="layoutRoot">
<Grid.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="100" />
</Style>
</Grid.Resources>
<Button />
</Grid>
then in the code-behind you can retrieve the default style using the Button type as the resource Key:
Style buttonStyle = layoutRoot.FindResource(typeof(Button)) as Style;

WPF displaying differently on different computers

I am running Windows XP on my computer, and another computer also is running Windows XP.
In my WPF application, I've changed the styles of my buttons to appear as if they are not highlighting when rolled over, clicked, etc.
On my computer, this is the behavior that is occurring. On the other Windows XP system, I am seeing some outlining of the buttons with I roll over them or click.
Any ideas on why this is happening?
EDIT
Here is the Button itself
<Button Click="Next_Click" Width="100" VerticalAlignment="Center" BorderThickness="0" BorderBrush="Black" Background="Black" IsTabStop="False" DockPanel.Dock="Right" HorizontalAlignment="Left" Height="154" Name="NextOffers">
<Image Source="Images/offer_right_arrow.jpg" Width="100" Height="154" MaxWidth="100" MaxHeight="154" HorizontalAlignment="Left" VerticalAlignment="Top" MinWidth="100" MinHeight="154" ></Image>
</Button>
Also this Style, too.
<Style TargetType="{x:Type ListBoxItem}" x:Key="ListBoxItemStyle">
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="ListBox_MouseLeftButtonDown"></EventSetter>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Padding="0,0,2,0" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Black"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I don't have a template made for this button, obviously.
I am loading my ResourceDictionaries dynamically in the code behind.

It sounds like you need a custom control template for your buttons. The default control template for most WPF controls is dependent upon the Windows theme that is selected, so that a button follows the theme whether you're on the Windows Classic theme, Aero, Royale, or whatever. If you want it to look exactly the same no matter what OS or theme the user has chosen, you'll save yourself a lot of headache using a custom control template.
Google "Show me the template" for an app that will give you the control template source (XAML) for each theme. This is a good starting point for creating custom templates.

The problem you're seeing is most likely due to the default Button Chrome. You can apply all sorts of styling, but if you leave that Chrome intact, the Windows theme is going to rear its ugly head.
You'll need to recreate the ControlTemplate itself.