How to stop style overwriting in wpf? - xaml

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.

Related

2 different colored borders around TextBox

I want to do create static style where TextBox element will have 2 different colored borders around it. Can I achieve this?
I already have rounded textbox with 1 border, but I'm clueless how to add another around it.
<Style TargetType="{x:Type TextBox}" x:Key="RoundTextBox">
<Style.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="3"/>
</Style>
</Style.Resources>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Color="#FF32C17C"/>
<GradientStop Color="#FF01312F" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="White"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="BorderBrush" Value="#FF69FF55"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="FontWeight" Value="Medium"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
<Setter Property="Margin" Value="20,10,0,-5"/>
</Style>
This is my code for textbox style.
Thank you for all answers :)
You can change control template of the textbox and define another border inside the border.
<Window.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border
BorderBrush="Red"
BorderThickness="1"
CornerRadius="2">
<Border
Name="Border"
Background="White"
BorderBrush="Gray"
BorderThickness="1"
CornerRadius="2">
<ScrollViewer x:Name="PART_ContentHost" Margin="0" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<TextBox
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Test" />
</Grid>
Here is the result!
For more information about textbox styles and templates you can click here.

Strech ListBox/ItemsControl in UWP

I want to stretch a listbox horizontally and vertically in UWP. I tried some WPF solutions, but none of them worked. (Stretch line to width of Itemstemplate canvas in itemscontrol)
What I tried:
<Page.Content>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Background" Value="AliceBlue" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<ItemsPresenter Height="252" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>asdf</ListBoxItem>
<ListBoxItem>asdfasdf</ListBoxItem>
<ListBoxItem>asdfsdf</ListBoxItem>
<ListBoxItem>34</ListBoxItem>
<ListBoxItem>as2df</ListBoxItem>
<ListBoxItem>asdf</ListBoxItem>
</ListBox>
</Grid>
</Page.Content>
The result is the following:
How can I stretch a listbox in uwp?
You have Explicitly Set the Height="252". That is the reason why it does not show up. Also you set the background of actual ListBox to Green but that is overridden by your ItemsPanelTemplate so Green doesn't show up.
Your final XAML should look something like below.
<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Background" Value="AliceBlue" />
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem>asdf</ListBoxItem>
<ListBoxItem>asdfasdf</ListBoxItem>
<ListBoxItem>asdfsdf</ListBoxItem>
<ListBoxItem>34</ListBoxItem>
<ListBoxItem>as2df</ListBoxItem>
<ListBoxItem>asdf</ListBoxItem>
</ListBox>
This is not Tested but should work as you expected.

How to Remove the Pivot Header but Keep Functionality

In a previous question How to Change Pivot Header Template in Windows Phone 8 I retemplated the Pivot Header, but I was wondering how it would be possible to remove the headers all together, while maintaining the functionality of a PivotControl.
Here's a solution that I use for the same purpose, it works fine:
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PivotStyle1" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<primitives:PivotHeadersControl x:Name="HeadersListElement" />
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PivotItemStyle1" TargetType="phone:PivotItem">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</phone:PhoneApplicationPage.Resources>
<phone:Pivot x:Name="MyPivot"
Style="{StaticResource PivotStyle1}" ItemContainerStyle="{StaticResource PivotItemStyle1}">
<phone:Pivot.ItemTemplate>
<DataTemplate><!-- dummy content to show that no header is on the screen -->
<Border BorderBrush="Blue" BorderThickness="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid Background="Red" />
</Border>
</DataTemplate>
</phone:Pivot.ItemTemplate>
<!-- we need empty header template to hide the pivotitem title completely -->
<phone:Pivot.HeaderTemplate>
<DataTemplate />
</phone:Pivot.HeaderTemplate>
</phone:Pivot>

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>

How to change button background color depending on bound command canexecute?

I Have a ItemTemplate in which is a simple button bound on a command, which can be executable or not depending on some property.
I'd like the color of this button's background to change if the command isn't executable.
I tried several methods, but I can't find anyway to do this purely in XAML (I'm doing this in a study context, and code behind isn't allowed).
Here's my code for the button :
<Button x:Name="Dispo" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="30" Height="30"
Grid.Column="2" Grid.Row="0"
Command="{Binding AddEmpruntCommandModel.Command}"
CommandParameter="{Binding ElementName='flowCars', Path='SelectedItem'}"
vm:CreateCommandBinding.Command="{Binding AddEmpruntCommandModel}" >
<Button.Style>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="True">
<Setter Property="Button.Background" Value="Green"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Button.Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
You can specify your own template like that:
<Button Content="OK" Command="{Binding SomeCommand}">
<Button.Style>
<Style>
<Setter Property="Button.Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Border" Background="Green">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border" Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>