Apply style to child content in WPF XAML with a template - wpf

I'm using a ListViewto display a menu. I want to apply a style to all ListViewItem. So far I have succeeded in one part of the concern but I would like to improve to avoid code replication. Here where I am :
<Window.Resources>
<Style x:Key="_listViewItemStyle" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd"
...
</Border>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And then use the style like that :
<ListView x:Name="_listViewMenu"
Background="Transparent"
BorderBrush="Transparent"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListViewItem Style="{StaticResource _listViewItemStyle}">
<StackPanel Orientation="Horizontal"
Width="230"
Margin="10,0,0,0">
<Image Width="30"
Source="Images/Settings.png"
Stretch="Uniform"/>
<TextBlock Text="Paramètres"
Margin="25,0,0,0"
Style="{StaticResource _fontStyle}"/>
</StackPanel>
</ListViewItem>
</ListView>
As you can see there are some stuff that I imagine I can avoid to duplicate if I have 50 ListViewItems, let's say :
<StackPanel Orientation="Horizontal"
Width="230"
Margin="10,0,0,0">
or
<Image Width="30"
...
Stretch="Uniform"/>
etc...
How to include in the style _listViewItemStyle all required properties to format StackPanel, Image, textbox, etc... of the ListViewItem?
Thanks.

You can define a class which has necessary properties and use it as item type of collection for ItemsSource which may be in view (xaml or code behind). Such class would be as follows.
public class SourceItem
{
public string? ImagePath { get; init; }
public string? Text { get; init; }
}
Then, if you just want to show items, ItemsControl would be suffice. I don't know how you intend to use Triggers though.
<ItemsControl Background="Blue" HorizontalAlignment="Left">
<local:SourceItem ImagePath="Images/Settings.png" Text="Paramètres"/>
...
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border x:Name="Bd">
<StackPanel Orientation="Horizontal"
Width="230"
Margin="10,0,0,0">
<Image Width="30"
Source="{Binding ImagePath, Mode=OneTime}"
Stretch="Uniform"/>
<TextBlock Text="{Binding Text, Mode=OneTime}"
Margin="25,0,0,0"
Style="{StaticResource _fontStyle}"/>
</StackPanel>
</Border>
<DataTemplate.Triggers>
...
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

In addition to the answer from #emoacht, you will need the following InputBindings:
<Border.InputBindings>
<MouseBinding Command="{Binding ItemCommand}" MouseAction="LeftClick"/>
</Border.InputBindings>

Related

Cannot wrap ItemsPresenter with a DynamicResource

I'm using MaterialDesignInXaml for stylize my application. Said that, I'm using a ListView with a CollectionViewGroup for group my items, anyway, in the GroupStyle I've this structure:
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Expander IsExpanded="True">
<Expander.Header>
<DockPanel Height="16.5">
<TextBlock Text="{Binding Name.Name}" FontWeight="Bold" Foreground="White" FontSize="11.5" VerticalAlignment="Bottom" />
<TextBlock Text="{Binding ItemCount}" FontSize="11.5" Foreground="Orange" FontWeight="Bold" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
</DockPanel>
</Expander.Header>
<Border Style="{DynamicResource MaterialDesignPaper}">
<ItemsPresenter />
</Border>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
Now the problem is on this line: <Border Style="{DynamicResource MaterialDesignPaper}">, if I remove the border all working well, but with the xml above I get this exception:
System.Windows.Markup.XamlParseException: Unable to cast objects of type 'System.Windows.Media.SolidColorBrush' to type 'System.Windows.Style'. ---> System.InvalidCastException: Can not cast objects of type 'System.Windows.Media.SolidColorBrush' on the type 'System.Windows.Style'.
why happen this?
MaterialDesignPaper is a Brush, not a Style.
Therefore, depending on your requirement, you want something like this:
<Border BorderBrush="{DynamicResource MaterialDesignPaper}" />
or
<Border Background="{DynamicResource MaterialDesignPaper}" />
All Material Design In XAML Brushes are listed here: https://github.com/ButchersBoy/MaterialDesignInXamlToolkit/wiki/Brush-Names

WPF - Custom ErrorTemplate for all TextBoxes in App

I have a form with many textboxes, each require the same validation Error-template.
Now, i don't wanna write these validation error-templates for every textbox. So where do i have to put that, so that all textboxes are affected?
Textbox with Validation.ErrorTemplate:
<TextBox x:Name="textBox3" TextWrapping="Wrap" Height="23" Text="{Binding User_Id, UpdateSourceTrigger=PropertyChanged, NotifyOnValidationError=True}" VerticalAlignment="Top">
<Validation.ErrorTemplate>
<ControlTemplate>
<StackPanel>
<AdornedElementPlaceholder x:Name="textBox"/>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ErrorContent}" Foreground="Red"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ControlTemplate>
</Validation.ErrorTemplate>
</TextBox>
My CustomControl:
public class ValidationTextBox : TextBox
{
static ValidationTextBox()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ValidationTextBox), new FrameworkPropertyMetadata(typeof(ValidationTextBox)));
//Validation.SetErrorTemplate(new ValidationTextBox(), )
}
public ValidationTextBox() { }
}
You need to define new Style for TextBox inside a "Resourse" tag of textbox's container. This style will be implemented for each textbox inside container.
Example:
<StackPanel>
<StackPanel.Resources>
<Style TargetType=TextBox>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel>
<AdornedElementPlaceholder x:Name="textBox"/>
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ErrorContent}" Foreground="Red"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources
<TextBox/>
<TextBox/>
<TextBox/>
</StackPanel>

ListView like WindowsLiveMessenger

<ListView Margin="0" Background="White" ItemContainerStyle="{DynamicResource ListViewItemStyle}" ItemTemplate="{DynamicResource DataTemplate}">
<ListView.Resources>
<Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Grid/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DataTemplate">
<Grid Width="Auto">
<Label Content="" HorizontalAlignment="Center" Margin="62,8,8,8" Width="100" VerticalAlignment="Center" Height="30"/>
<Image HorizontalAlignment="Left" Margin="8,8,0,8" Width="50" VerticalAlignment="Stretch" Height="30"/>
</Grid>
</DataTemplate>
</ListView.Resources>
<ListViewItem>
</ListViewItem>
</ListView>
i'm new to blend !!
how to add items from code that contain those 2 controls
this question is similar to
How to write ListViewItem that contain image , text and button?
You are using a DataTemplate that should be applied to the items, but you do not bind the relevant properties at all.
i.e.
<DataTemplate x:Key="DataTemplate">
<Grid Width="Auto">
<Label Content="{Binding Name}"
HorizontalAlignment="Center" Margin="62,8,8,8" Width="100" VerticalAlignment="Center" Height="30"/>
<Image Source="{Binding ImageUrl}"
HorizontalAlignment="Left" Margin="8,8,0,8" Width="50" VerticalAlignment="Stretch" Height="30"/>
</Grid>
</DataTemplate>
See those two bindings? Your data-objects need to provide those public properties, i named them Name and ImageUrl here.
// Data-object class example
public class Contact
{
public string Name { get; set; }
public string ImageUrl { get; set; }
//...
}
If your data-object supports that you can just add items of that type to the ListView and it should display as you want it to.
This might not make much sense to you, if so, make sure to read introductory material first:
Data Binding Overview
Data Templating Overview

How to enable scrolling when listbox is disabled in Silverlight?

I want to disable listbox (not allow user to selected) but scrollable in Silverlight, how can I do that?
How about not using a ListBox. Despite it being the defacto means for displaying a list of items the true purpose of the ListBox is to select something from a list.
A scrollable list can be delivered by styleing the ItemsControl like this:-
<Grid.Resources>
<Style x:Key="ScrollableItemsControl" TargetType="ItemsControl">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ItemsControl">
<Border CornerRadius="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" TabNavigation="{TemplateBinding TabNavigation}">
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
Now you apply this style to an ItemsControl:-
<ItemsControl Style="{StaticResource ScrollableItemsControl}" ItemsSource="{Binding SomeData}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding SomeProperty}" Margin="5" />
<TextBlock Text="{Binding SomeOtherProperty}" Margin="5" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
This is a scrollable list but with none of the selection semanitics of the ListBox. Note there are fewer intermediatory elements in the visual tree doing this way than fiddling around with the ListBox control.
Edit
In light of your comment there is an easy way to toggle the selection behaviour of a ListBox without disabling it. You disable the ListBoxItems it contains instead.
<Grid.Resources>
<Style x:Key="DisabledItem" TargetType="ListBoxItem">
<Setter Property="IsEnabled" Value="False" />
</Style>
</Grid.Resources>
<ListBox x:Name="lst" ItemsSource="{StaticResource TestData}" ItemContainerStyle="{StaticResource DisabledItem}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" Margin="5" />
<TextBlock Text="{Binding Age}" Margin="5" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In this case the ListBox starts of with disabled items. Scrolling however is still possible. But the items appear dimmed and there is no hover or selected highlighting going on.
The code below is able to toggle the "disabled" state on and off.
private void Button_Click(object sender, RoutedEventArgs e)
{
if (lst.ItemContainerStyle == null)
lst.ItemContainerStyle = (Style)LayoutRoot.Resources["DisabledItem"];
else
lst.ItemContainerStyle = null;
}

WPF Buttons Style

I have WPF Form which has many buttons with the same code. Appearance of all buttons must be the same
For example, code for one of these buttons
<Button x:Name="btnAddRelative" Width="120" Click="btnAddRelative_Click" >
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Height="26" HorizontalAlignment="Left">
<Image.Source>
<BitmapImage UriSource="images/add.png" />
</Image.Source>
</Image>
<TextBlock Text=" Add Relative" Height="20" VerticalAlignment="Center"/>
</StackPanel>
</Button.Content>
</Button>
How can I create one style and use it for all my buttons. All buttons has the same png image, only their text different. How can I do this.
I tried to do this with Style object in Resource Section:
<UserControl.Resources>
<Style TargetType="Button" x:Key="AddStyle">
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Horizontal">
<Image Height="26" HorizontalAlignment="Left">
<Image.Source>
<BitmapImage UriSource="images/add.png" />
</Image.Source>
</Image>
<TextBlock Text=" " Height="20" VerticalAlignment="Center"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
But this code not work. Can any body know how can I do this?
If the image is fix you can hard-code it in the style, and use the Content property of Button bin to the Content of TextBox
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel
Orientation="Horizontal">
<!--<Image Height="26" HorizontalAlignment="Left">
<Image.Source>
<BitmapImage UriSource="images/add.png" />
</Image.Source>
</Image>-->
<TextBlock
Foreground="{TemplateBinding Foreground}"
Text="{TemplateBinding Content}"
Height="20"
VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
just try this
<Window.Resources>
<Style TargetType="Button"
x:Key="AddStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<StackPanel Orientation="Horizontal">
<Image Height="26"
Width="20"
HorizontalAlignment="Left">
<Image.Source>
<BitmapImage UriSource="/WpfApplication33;component/Images/MoveLeft.png" />
</Image.Source>
</Image>
<TextBlock Text ="{TemplateBinding Content}"
Height="20"
/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<StackPanel>
<Button Style="{StaticResource AddStyle}"
Height="25" Width="100"
Content="Button1"></Button>
<Button Style="{StaticResource AddStyle}"
Height="25"
Width="100"
Content="Button22"></Button>
<Button Style="{StaticResource AddStyle}"
Height="25"
Width="100"
Content="Button2233"></Button>
<Button Style="{StaticResource AddStyle}"
Height="25"
Width="100"
Content="Button2332"></Button>
</StackPanel>
</Grid>
Note: Use ContentPresenter instead of TextBlock if you have to display anything other than flat text
Try changing your style as follows
<UserControl.Resources>
<Style
TargetType="Button"
x:Key="AddStyle">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate>
<StackPanel
Orientation="Horizontal">
<Image
Height="26"
HorizontalAlignment="Left">
<Image.Source>
<BitmapImage
UriSource="images/add.png" />
</Image.Source>
</Image>
<TextBlock
Text=" "
Height="20"
VerticalAlignment="Center" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[Edit inspired by comment]
You could create a new UserControl, lets call it AddButtonContent containing your Stackpanel and such, then include that within your button, like so:
<Button>
<local:AddButtonContent
ButtonText="Testing, one, two, three" />
</Button>
You'll need to add a xmlns reference called local (or whatever you'd like to call it) to the UserControl with all of the buttons.
The codebehind portion of your AddButtonContent UserControl will need the following code, and you'll need to name your TextBlock (I used testText for this example).
public static DependencyProperty ButtonTextProperty =
DependencyProperty.Register("ButtonText",
typeof(string),
typeof(AddButtonContent),
new PropertyMetadata("", onTextChangedCallback));
public string ButtonText
{
get { return (string)GetValue(ButtonTextProperty); }
set
{
SetValue(ButtonTextProperty, value);
}
}
static void onTextChangedCallback(
DependencyObject dobj,
DependencyPropertyChangedEventArgs args)
{
AddButtonContent abc = dobj as AddButtonContent;
abc.testText.Text = args.NewValue.ToString();
}

Resources