ContentDialog: Applying both Style and PrimaryButtonStyle - xaml

Gang,
I'm referencing the 16299 version.
I'm trying to set a style for the ContentDialog, and a Style for the PrimaryButton. However, I cannot get both of them working together:
<ContentDialog x:Class="App1.ContentDialog1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
PrimaryButtonText="Button1"
SecondaryButtonText="Button2"
Style="{StaticResource ContentDialogStyle}"
PrimaryButtonStyle="{StaticResource ContentDialogPrimaryButtonStyle}">
<Grid />
</ContentDialog>
This will only apply the "Style" and not the "PrimaryButtonStyle". However, if I remove the "Style" attribute, I then get the PrimaryButtonStyle applied.
I have tried applying the PimaryButtonStyle inside the Style XAML, but that doesn't work either:
<Style TargetType="Button" x:Key="ContentDialogPrimaryButtonStyle">
<Setter Property="Template">
<Setter.Value>
...
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ContentDialog" x:Key="ContentDialogStyle">
<Setter Property="PrimaryButtonStyle" Value="{StaticResource ContentDialogPrimaryButtonStyle}" />
<Setter Property="Template">
<Setter.Value>
...
</Setter.Value>
</Setter>
</Style>
Any ideas how I style the Primary/Secondary buttons inside a ContentDialog that itself has a Style?
Kind regards
Adam

It should be related with your Template in the ContentDialogStyle. We can change both ContentDialogStyle and PrimaryButtonStyle in the xaml, here is a simple example, you can see it. Then you should take a look at your Template in the ContentDialogStyle.
This is the code,
<Style TargetType="Button" x:Key="ContentDialogPrimaryButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="Green" BorderThickness="5">
<ContentPresenter Background="Red" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="ContentDialog" x:Key="ContentDialogStyle">
<Setter Property="Background" Value="Yellow"/>
</Style>
This is the ContentDialog,
<ContentDialog
...
PrimaryButtonText="Button1"
SecondaryButtonText="Button2"
Style="{StaticResource ContentDialogStyle}"
PrimaryButtonStyle="{StaticResource ContentDialogPrimaryButtonStyle}">
<Grid/>
</ContentDialog>

Related

UWP Same Thumb Style but looks different

I used the same style for the Thumb of the slider, but the Thumb looks different in different context.
Expected Pressed Thumb:
Expected Pressed Thumb:
Real Normal Thumb:
Real Pressed Thumb
As you can see from the real ones, they are somewhat transparent in the middle. Why are they different from the expected ones? How can I make them behave like the expected ones? They share the same code.
These are the styles:
<Style x:Key="SliderThumbStyle" TargetType="Thumb">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse
x:Name="ellipse"
Fill="{StaticResource MediaSliderThumbFillBrush}"
Stroke="White"
StrokeThickness="3.2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="SliderPressedThumbStyle"
BasedOn="{StaticResource SliderThumbStyle}"
TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse
x:Name="ellipse"
Fill="White"
Stroke="White"
StrokeThickness="3.2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style
x:Key="SliderPointerOverThumbStyle"
BasedOn="{StaticResource SliderThumbStyle}"
TargetType="Thumb">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse
x:Name="ellipse"
Fill="{StaticResource MediaSliderThumbFillBrush}"
Stroke="{StaticResource MedialSliderPointerOverThumbStrokeBrush}"
StrokeThickness="3.2" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
These are the brushes:
<media:BackdropBlurBrush x:Key="MediaSliderThumbFillBrush" Amount="50" />
<AcrylicBrush
x:Key="MediaSliderTrackRectBrush"
BackgroundSource="Backdrop"
FallbackColor="White"
TintColor="White"
TintOpacity="0.25" />
<AcrylicBrush
x:Key="MedialSliderPointerOverThumbStrokeBrush"
BackgroundSource="Backdrop"
FallbackColor="White"
TintColor="White"
TintOpacity="0.75" />
UWP Same Thumb Style but looks different
Please check MediaControl.xaml custom control. You set the Opacity as 0.75 for FullMediaControlGrid grid cause this issue, you could solve this by setting Opacity as 1.0.
<Grid
x:Name="FullMediaControlGrid"
Background="{x:Bind Background}"
Opacity="1"
RequestedTheme="Dark"
Visibility="Visible">

How to restyle a XAML radio button as a coloured label

I am using the following style with a group of radiobuttons:
<Style x:Key="RadioTextStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Label Content="{TemplateBinding Content}" Foreground="Red"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The trigger is not executed and I assume this is because it is looking for the IsChecked property of the Label. How can I properly ensure that the label colour properly tracks the IsChecked state of the underlying RadioButton?
I am still trying many variants of this and currently have the following:
<Style x:Key="RadioTextStyle" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Label x:Name="RadioLabel" Content="{TemplateBinding Content}" Foreground="Red"/>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}" Value="True">
<Setter Property="Foreground" Value="Green"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This looks right to me and intellisense suggests most of the values. However, it still doesn't actually change selected labels to green.
Thanks,
Andy
Keep your original try. You just need to tell your trigger what it's actually changing something on with TargetName like;
<Style x:Key="RadioLabel" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Label x:Name="RadioLabel"
Content="{TemplateBinding Content}" Foreground="Red"/>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="RadioLabel"
Property="Background" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Hope this helps, cheers.

How to stop style overwriting in wpf?

I create a WPF UserContorl and create a style for ListView in my UserContorl theme.
My ListView Style :
<Style TargetType="ListView" x:Key="ReminderListView">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<CheckBox Style="{StaticResource ReminderCheckBox}" IsChecked="{Binding IsSelected, Mode=TwoWay}" Content="{Binding Title, Mode=OneTime}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
My ListView Style Work Correctly in UserContorl.
My used Xaml in UserControl:
<ListView Name="snoozeListView" Grid.Column="1" Style="{StaticResource ReminderListView}" ItemsSource="{Binding ReminderItems}" >
i use this UserControl in other WPF project which have a ListViewItem Style.
ListViewItem Style :
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}"/>
<Setter Property="Background" Value="Transparent" />
<Setter Property="Padding" Value="2,0,2,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<StackPanel SnapsToDevicePixels="True" Margin="2,0,2,0">
<Grid x:Name="Grid" Background="Transparent">
<Rectangle x:Name="SelectedRect" IsHitTestVisible="False" Fill="{StaticResource SelectedBackgroundBrush}" Opacity="0"/>
<GridViewRowPresenter Height="Auto" Margin="2"/>
</Grid>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now ListViewItem style overwriting the ListView ItemTemplate Style which defined in user control theme.
How can i stop overwriting.

how to set the color of toggle button from style already defined in app xaml?

I had created a button and i want to change its color using style from app xaml.
But,i don't get the exact code and i am new to xaml.
Can any one help me with some example.
I am also confused to use which property to change color means background or foreground?
<Window
x:Class="ToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar"
Width="300"
Height="300">
<DockPanel>
<ToolBarTray
DockPanel.Dock="Top"
IsLocked="True"
Orientation="Horizontal">
<ToolBar
x:Name="ToolBar1">
<ToggleButton>
<ToggleButton.Style>
<Style
TargetType="{x:Type ToggleButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Play</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Pause</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</ToolBar>
</ToolBarTray>
</DockPanel>
</Window>
Within a toolbar, the two statements:
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
causes the toggle button to appear in the normal state when the toggle button is checked, however nothing changes when you hover over the checked toggle button.
If I wrap the toggle button in another layout, say wrap layout:
<Window
x:Class="ToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar"
Width="300"
Height="300">
<WrapPanel>
<ToggleButton>
<ToggleButton.Style>
<Style
TargetType="{x:Type ToggleButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Play</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Label>Pause</Label>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
</WrapPanel>
</Window>
the two statements:
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="Panel.Background" Value="Transparent" />
You can find tutorial in the folowing url
http://social.msdn.microsoft.com/Forums/pl-PL/wpf/thread/7e565a41-0aad-40a3-a3c4-666c5caf38fe
Thanks
Deepak

How Can I Create a Bound List of RadioButtions with ToolTips in Xaml?

I want to create a list of logically related RadioButtons. The RadioButtons are bound for MVVM use. There's ToolTips on each RadioButtons.
Here is a Style that creates a group of logically related RadioButtons by using a ListBox. MyClass contains two String properties: MyName and MyToolTip. The style will display the list of RadioButtons including properly functioning individual ToolTips. This is an all bound, all Xaml solution for MVVM use.
Example usage:
ListBox Style="{StaticResource radioListBox}" ItemsSource="{Binding MyClasses}" SelectedValue="{Binding SelectedMyClass}"/>
Style:
<Style x:Key="radioListBox" TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="Transparent">
<RadioButton Focusable="False" IsHitTestVisible="False" IsChecked="{TemplateBinding IsSelected}" Content="{Binding MyName}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{Binding MyToolTip}" />
</Style>
</Setter.Value>
</Setter>
</Style>