Unselected tabs disappear - wpf

I'm trying to fix a problem on a WPF app that was written, and seems to have worked, on Windows XP and Windows 7. On Windows 10, we're having a problem with unselected tabs disappearing.
The main window has a TabControl that has a custom style applied to its TabItems:
<TabItem
x:Name="dashboardTab"
Header="Dashboard"
Style="{StaticResource mainTabStyle}"
>
<local:DashboardControl x:Name="DashboardControl"/>
</TabItem>
The style:
<Style x:Key="mainTabStyle" TargetType="{x:Type TabItem}">
<Setter Property="Margin" Value="10,5,0,0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="ContentWrapper">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Bottom" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" Width="150" RecognizesAccessKey="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="ContentWrapper" Property="Background" Value="AliceBlue" />
<Setter TargetName="ContentSite" Property="TextBlock.FontWeight" Value="Medium" />
<Setter TargetName="ContentSite" Property="TextBlock.Margin" Value="12,2,12,8" />
<Setter TargetName="ContentSite" Property="TextBlock.FontSize" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type Window}}, Path=FontSize, Converter={StaticResource mathConverter}, ConverterParameter=5}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter TargetName="ContentWrapper" Property="TextBlock.Foreground" Value="Black" />
<Setter TargetName="ContentWrapper" Property="Background">
<Setter.Value>
<SolidColorBrush Color="White" Opacity="0.5" />
</Setter.Value>
</Setter>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False" />
<Condition Property="IsMouseOver" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="White" />
<Setter TargetName="ContentWrapper" Property="Background">
<Setter.Value>
<SolidColorBrush Color="White" Opacity="0.15" />
</Setter.Value>
</Setter>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The idea is to change the look of the tab item headers to look less like tabs and more like a row of selection buttons.
If I remove the style from the TabItems, I get a perfectly ordinary looking set of tab headers. If I leave it in place, under Windows 7 it works fine. The selected tab is highlighted with a light blue background. In Windows 10, though, the unselected tabs are invisible. The foreground text seems to be white.
Unfortunately, our WPF expertise has walked out the door, and I'm stuck trying to fix this. I know that its this style that controls the visibility. As I said, if I remove it I get normal tab headers. If I leave it in place and change the background color from "AliceBlue" to "Red", I see the change.
My question: how do I change this style to apply a specified foreground color to the textblocks of unselected tabs?

In the last multi-trigger, you are setting the TextBlock.Foreground property to White when IsSelected and IsMouseOver is false
This line right here <Setter TargetName="ContentSite" Property="TextBlock.Foreground" Value="White" />
And also you are setting the Background color to white in the following setter (i'm not sure what the opacity is for)
<Setter TargetName="ContentWrapper" Property="Background">
<Setter.Value>
<SolidColorBrush Color="White" Opacity="0.15" />
</Setter.Value>
</Setter>

Related

ListBox ItemContainerStyle does not register white space click

Putting in an ItemContainerStyle no longer registers when clicking on white space within the ListBoxItem.
Background: I have a ListBox where I want to customize the ItemContainerStyle. The style works, however, it brings up a new issue, the ListBox no longer changes selection when clicking the white space within a ListBoxItem. Using the arrow keys works perfectly and if I click on a control within the ListBoxItem then the selection is changed
Here is my ItemContainerStyle
<Style TargetType="ListBoxItem" x:Key="RegListBoxItem">
<Setter Property="Opacity" Value="0.5" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Opacity" Value="1.0" />
<Setter Property="MinHeight" Value="100" />
<Setter TargetName="_Border" Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="25" ShadowDepth="8" Direction="270" Color="Black" Opacity=".42" RenderingBias="Performance" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I know it is the ItemContainerStyle because if I remove the ItemContainerStyle from the ListBox it works correctly.
Thanks

WPF Button Change Background during Click

This should be simple, therefore it is something I am missing. I need to change the background color of the a button during the click only. So if a user click the button for 2 days, then the color changes during that two day period. Once the user is done clicking it returns to the normal color. Figured this would solve my issue:
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Button.Background" Value="Purple" />
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="0" BlurRadius="0" Opacity="0" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
Now I know the IsPressed does work as the DropShadowEffect work correctly during the press. However the color does not change. The only reason I could think why is that IsMouseOver is taking priority over IsPressed. If this is the case how can I get the two events to "work together?"
Now before people start linking me to this;
WPF changing button background on click or this Change Button Background color on EventTrigger in WPF or this Change Button Background color on EventTrigger in WPF
Yes those change the color of the button but irrespective on the users click time. As stated above I only want it effected during the actual user's click, like the DropShadowEffect
ahhh, I was right! The problem was in fact that IsMouseOver and IsPressed where not getting along! Here is the fix;
<Style x:Key="NewButton" TargetType="Button">
<Setter Property="Background" Value="Red"/>
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="5" Opacity="0.5" />
</Setter.Value>
</Setter>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsPressed" Value="False" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="Green" />
</MultiTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Button.Background" Value="Purple" />
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="0" BlurRadius="0" Opacity="0" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>

WPF RadioButton Style using TextDecorations Underline

I would like to change the style of the WPF RadioButton so that the Bullet is not shown, the text is bold when IsSelected is true, the text is not bold, underlined, and the cursor is the hand when IsSelected is false. I have it almost working but I can not get the text underlined. This is my XAML so far.
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="DarkBlue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border SnapsToDevicePixels="True">
<ContentPresenter VerticalAlighment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="TextBlock.FontWeight" Value="UltraBold" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Cursor" Value="Hand" />
<Setter Property="TextBlock.TextDecorations" Value="Underline" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Any suggestions anybody could offer that could explain why the text of the RadioButton is not underlined when IsSelected is False would be greatly appreciated.
Edit:
OK based on the link provided I was able to change the Style to the following.
<Style TargetType="{x:Type RadioButton}">
<Setter Property="Foreground" Value="DarkBlue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<TextBlock x:Name="TextBlock" Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type RadioButton}}, Path=Content}" />
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="TextBlock.FontWeight" Value="UltraBold" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Cursor" Value="Hand" />
<Setter TargetName="TextBlock" Property="TextDecorations" Value="Underline" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then to use a RadioButton with this style.
<RadioButton Content"New" IsChecked="True" />
<RadioButton Content="Filter" />
This now shows two RadioButtons with no Bullet, its Content is Bold when IsSelected is true, and when IsSelected is false its not bold, underlined and shows the Hand cursor.
My only comment now is if I am Binding the Text Property of a TextBlock to the Content property of a RadioButton would that fail if the Content of the RadioButton is something other then a String?
Yes it will fail in the sense that the content will not be shown, instead you will get the result of ToString() on the content, but since you want underlined / bold text for your radio, that seems to be exactly what you want?

Issues with ListBoxItem ControlTemplate design in WPF?

Here's my XAML:
<ListBox
Name="PlaylistListBox"
ScrollViewer.CanContentScroll="False"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Source={StaticResource ResourceKey=MyListBoxView}}"
ItemTemplateSelector="{Binding Source={StaticResource ResourceKey=MySelector}}"
MouseDoubleClick="PlaylistListBox_MouseDoubleClick" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
Name="Border"
CornerRadius="4"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Black" />
<!-- The following setter for opacity is giving me headaches -->
<Setter TargetName="Border" Property="Opacity" Value="0.5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<EventSetter
Event="Loaded"
Handler="PlaylistListBoxItem_Loaded" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
Two issues:
Because of the Opacity setter, whole item is transparent by 50%. I want just the
border defined in the ListBoxItem ControlTemplate to be transparent and its content
to preserve full opacity.
How do I make a Setter/Trigger to make that same border red when the ListBox is not
in focus? It should be something like InFocus="False" and IsSelected="True".
Thanks for clarifying.
You should place another border underneath the content and make it half-transparent remaining the main content fully visible. You can accomplish this by using Grid and placing a "background" border in it first and then the content. This way you will set the opacity only on the background border, but not on the content;
You can use a MultiTrigger for that.
Here is the modified style that shows what I mean:
<ListBox
Name="PlaylistListBox"
ScrollViewer.CanContentScroll="False"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding Source={StaticResource ResourceKey=MyListBoxView}}"
ItemTemplateSelector="{Binding Source={StaticResource ResourceKey=MySelector}}"
MouseDoubleClick="PlaylistListBox_MouseDoubleClick" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid>
<Border
Name="BackgroundBorder"
CornerRadius="4"
SnapsToDevicePixels="true">
</Border>
<Border Name="Border">
<ContentPresenter />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="BackgroundBorder" Property="Background" Value="Black" />
<!-- The following setter for opacity is giving me headaches -->
<Setter TargetName="BackgroundBorder" Property="Opacity" Value="0.5" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="IsFocused" Value="False"/>
</MultiTrigger.Conditions>
<Setter TargetName="BackgroundBorder" Property="Background" Value="Red" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<EventSetter
Event="Loaded"
Handler="PlaylistListBoxItem_Loaded" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

How are WPF Buttons and TextBlock styles related?

I have a custom style for my 'default' Buttons, and also created a custom style for TextBlocks. If I remove the TextBlock style entirely, everything works fine, but once the TextBlock styling is added in for some reason the Button style is used on the Button's text 'default' state. It seems like some kind of inheritance is going on here but I can't see where in the msdn docs. What's going on?
I'm using Expression Blend 4-- and also another odd thing is that the preview in Blend looks fine, but when I RUN the application, the button styles are incorrect in their default state. Here's the styles which seem to be conflicting:
<ResourceDictionary>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FFFDFF00" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleY="1.20" ScaleX="1.20"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">
<ContentPresenter.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="4"/>
</ContentPresenter.Effect>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontFamily" Value="/Rtk;component/Fonts/#Segoe Print"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="18"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="HorizontalAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Background" Value="{x:Null}"/>
</Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextWrapping" Value="NoWrap"/>
<Setter Property="TextTrimming" Value="None"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontSize" Value="16"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="3" ShadowDepth="4"/>
</Setter.Value>
</Setter>
<Setter Property="FontFamily" Value="/Rtk;component/Fonts/#Segoe Print"/>
</Style>
</ResourceDictionary>
This is how I am using the Button control itself:
<Button Content="Button Text" FontSize="24"/>
(note that this fontsize is different from the size I specified in the default style, 18 - I want to override it in this button's case)
Edit:
The actual button entry looks like this in MainWindow.xaml, there's no other customizations other than the style changes I posed from App.xaml:
<Button Content="Button" HorizontalAlignment="Left" Margin="336,0,0,274.226" VerticalAlignment="Bottom" Width="75"/>
To illustrate what I'm seeing:
Just a fast wild guess, but when the content of a button is a string, isn't it default a textblock?
As people have suggested, your Button contains a Textblock created to hold the content, it is picking up the style from app.xaml, you can work around this in a few ways, here are a couple:
Put an explicit textblock into your button, and apply no style:
<Button Margin="272,192,277,0" VerticalAlignment="Top">
<TextBlock Text="Button" Style="{x:Null}"/>
</Button>
Put a textblock into your button style, also with a null style:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<TextBlock Text="{TemplateBinding Content}" Style="{x:Null}">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="3" ShadowDepth="4"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
Hopefully one of those 2 will work for you.
Looking only ay the code you posted, I can't see how the TextBlock Style would in any way influence the appearance of the Buttons - unless the Content of the Buttons consists (directly or indirectly) of TextBlocks. Can you post a more complete code sample, possibly including the Button's XAML?

Resources