We Keep Coding

WPF How to bind a control which is defined in a style from the element which uses the style?

I'm new to wpf and xaml,
trying to understand the basic concepts by writing a simple app using MVVM.
One thing I can't wrap my head around is
How to bind a control eg. textBox which is defined in a style to a viewModel from the control which uses this style?
Style Example (I like to bind the textBox named "SearchBox"):
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type TextBox}"
x:Key="FlatSearchBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border CornerRadius="10"
Background="#353340"
Width="200" Height="40">
<Grid>
<Rectangle StrokeThickness="1"/>
<TextBox Margin="1"
Text="{TemplateBinding Text}"
BorderThickness="0"
Background="Transparent"
VerticalContentAlignment="Center"
Padding="5"
Foreground="#CFCFCF"
x:Name="SearchBox"/>
<TextBlock Grid.Column="1"
IsHitTestVisible="False"
Text="Search"
VerticalAlignment="Center"
HorizontalAlignment="Left"
Margin="10,0,0,0"
FontSize="11"
Foreground="DarkGray">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=SearchBox}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
<Setter Property="Visibility" Value="Hidden"/>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Part of XAML in which the style is applied to a textBox:
<TextBox Grid.Row="2" Grid.Column="2"
VerticalAlignment="Center"
FontSize="20"
Style="{StaticResource FlatSearchBox}"
Text="{Binding CurrentFinanceModel.Value, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource currencyConverter}}"/>
The text binding should apply to the textBox named "SearchBox" in the style.
Hope the question is clear and I did not make a mistake, because it's my first question here :)
Thanks!

How do I change a controls background on my UserControl when the item is selected

So I have this ListView which has a DataTemplate of my UserContol because I wanted a custom design for my ListView and it looks like this
<ListView x:Name="LeftMenuListView"
ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem}"
BorderThickness="0"
Width="255">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<local:MenuItemControl/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Super simple, now when an Item is selected the entire thing changes color
which I want it looks great imo
<Style TargetType="ListViewItem">
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
Name="Border"
BorderThickness="0">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background"
Value="#444444"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But there is a border inside my usercontrol thats 10px wide with the name SmallBorder.
I want to change the color of that to green when the item is selected but I have no idea how to access that property
My UserControl
<Grid Background="Transparent">
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center"
Margin="20,0,0,0"
Foreground="#9e9e9e"
FontFamily="Tahoma"/>
<Border Width="10"
HorizontalAlignment="Left"
x:Name="SmallBorder"/>
</Grid>
So how do I change the color of SmallBorder when an item is selected and then when it's not selected it turns transparent?

The ViewModel, which is the DataContext of you usercontrol, should expose a property like IsSelected, then you can add an style with a DataTrigger that reacts to a change in this property.
EDIT:
Declare an style for the border itself an access it as an StaticResource:
It could be placed in a ResourceDictionary, within YourUserControl.Resources or inline with the Border control declaration:
<Style TargetType={x:Type Border} x:Key=SelectedBorderStyle>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="BorderBrush" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
And then your UserControl would be:
<Grid Background="Transparent">
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center"
Margin="20,0,0,0"
Foreground="#9e9e9e"
FontFamily="Tahoma"/>
<Border Width="10"
Style={StaticResource SelectedBorderStyle}
HorizontalAlignment="Left"/>
</Grid>
Note that now you don't need to set the name for the Border.

A Border is invisible unless there is something in it, but you could replace the Border with a Grid and use a Style with a DataTrigger that binds to the IsSelected property:
<Grid Background="Transparent">
<TextBlock Text="{Binding Name}"
VerticalAlignment="Center"
Margin="20,0,0,0"
Foreground="#9e9e9e"
FontFamily="Tahoma"/>
<Grid Width="10"
HorizontalAlignment="Left"
x:Name="SmallBorder">
<Grid.Style>
<Style TargetType="Grid">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=ListViewItem}}" Value="True">
<Setter Property="Background" Value="Red" />
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</Grid>

How to apply App.XAML style to current window

I am trying to apply validation error template and defining style in App.XAML.
<Application x:Class="MY.UI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:BP.NES.UI"
>
<Application.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Grid>
<Border BorderBrush="#FFCB2E2E" BorderThickness="1" Background="#11FF0000" IsHitTestVisible="False" x:Name="errorBorder"/>
<AdornedElementPlaceholder x:Name="placeholder" />
<Popup AllowsTransparency="True" HorizontalAlignment="Right" HorizontalOffset="0" VerticalOffset="0" PopupAnimation="Fade" Placement="Left"
PlacementTarget="{Binding ElementName=errorBorder}" IsOpen="{Binding ElementName=placeholder, Path=AdornedElement.IsFocused, Mode=OneWay}">
<StackPanel Orientation="Horizontal">
<Polygon VerticalAlignment="Center" Points="0,4 4,0 4,8" Fill="#FFCB2E2E" Stretch="Fill" Stroke="#FFCB2E2E"
StrokeThickness="2" />
<Border Background="#FFCB2E2E" CornerRadius="4" Padding="4">
<TextBlock HorizontalAlignment="Center" Foreground="White" FontWeight="Bold" Margin="2,0,0,0"
Text="{Binding ElementName=placeholder, Path=AdornedElement.ToolTip, Mode=OneWay}" />
</Border>
</StackPanel>
</Popup>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>
</Application.Resources>
</Application>
Now in My Main Window I have following code:
<Window x:Class="MY.UI.View.MainWindow"
xmlns:local="clr-namespace:MY.UI.View"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
mc:Ignorable="d"
xmlns:vm="clr-namespace:MY.UI.ViewModel"
xmlns:rules="clr-namespace:MY.UI.Validations"
>
<Grid x:Name="MainGrid">
<TextBox Grid.Row="1"
x:Name="CellphoneNumberTextBox"
Grid.Column="1"
VerticalAlignment="Stretch"
Margin="10,0,0,10"
IsEnabled="{Binding ElementName=PereferenceRadio,Path=IsChecked}"
Text="{Binding CurrentEnrolmentDetail.CellNumber,NotifyOnValidationError=True,ValidatesOnNotifyDataErrors=True,UpdateSourceTrigger=PropertyChanged}">
</TextBox>
</Grid>
</Window>
If I move style to Window.Resources, it just works fine ,but when I have this in App.XAML , does not work. Is this due to difference in namespace?

Set a style key in App.Xaml and use the key in your Textbox.
Example:
App.Xaml
<Style x:Key="HeaderStyle" TargetType="TextBlock">
<Setter Property="Foreground" Value="Gray" />
<Setter Property="FontSize" Value="24" />
</Style>
Window:
<Window x:Class="WpfTutorialSamples.Styles.ExplicitStyleSample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="ExplicitStyleSample" Height="150" Width="300">
<StackPanel Margin="10">
<TextBlock>Header 1</TextBlock>
<TextBlock Style="{StaticResource HeaderStyle}">Header 2</TextBlock>
<TextBlock>Header 3</TextBlock>
</StackPanel>
</Window>
Or Override using BasedOn functionality
Try this if you don't have interest to create style key
App.Xaml
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<!-- ... -->
</Style>
I have declared my base styles in a ResourceDictionary in App.xaml, if i override them in a specific window like this, it usually works.

If all TextBox will remain similar thought application than use following in resource file.
<Style TargetType="{x:Type TextBox}" BasedOn="{StaticResource {x:Type TextBox}}">
<Setter Property="Background" Value="Blue"/>
</Style>
Else create key in App.xaml and use in the TextBox's where required as shown below:
<Style x:Key="TextboxBackgroundColor" TargetType="TextBox">
<Setter Property="Background" Value="Cyan"/>
</Style>
<TextBox x:Name="txtText" Style="{StaticResource TextboxBackgroundColor}" />

Applying a Custom Template for TextBox Header

I am developing a windows phone app and my requirements include to use a specific color theme and not use the default theme (Light/Dark/etc.) of the phone.
I'm stuck at formatting/templating the headers of textboxes. The following code in the app.xaml is not working:
<DataTemplate x:Key="HeaderTemplate">
<TextBlock Text="{Binding}" Foreground="Black"/>
</DataTemplate>
<Style TargetType="TextBox">
<Setter Property="Foreground" Value="#FFBBB8B8"/>
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="HeaderTemplate" Value="{StaticResource HeaderTemplate}"/>
</Style>
Is there either a way just to configure the theme used or a way to implement the template for the headers?

If you need to implement a Template on a Page
<Page.Resources>
<Style TargetType="TextBox">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding}" Foreground="Red" />
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<StackPanel>
<TextBox x:Name="TextBox" Width="300" Height="80"
Margin="20" Header="Headline"/>
<TextBox x:Name="TextBox2" Width="300" Height="80"
Margin="20" Header="Headline2"/>
</StackPanel>
or if you want the Style to apply to certain TextBox give it a Key
<Style TargetType="TextBox" x:Key="MyTextBoxStyle">
and apply to relevant TextBox
<TextBox x:Name="TextBox2" Width="300" Height="80"
Margin="20" Header="Headline2"
Style="{StaticResource MyTextBoxStyle}"/>}"/>
Hope that helps

It is really strange I tested the following:
<Application.Resources>
<Style TargetType="TextBox" >
<Setter Property="Foreground" Value="#FFBBB8B8"/>
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Foreground="Red" Text="testing"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DT1">
<TextBlock Foreground="Green" Text="testing"/>
</DataTemplate>
<Style TargetType="TextBox" x:Key="TextBoxStyle2">
<Setter Property="Foreground" Value="#FFBBB8B8"/>
<Setter Property="BorderBrush" Value="LightGray"/>
<Setter Property="HeaderTemplate" Value="{StaticResource DT1}"/>
</Style>
</Application.Resources>
and in the mainpage
<Grid>
<TextBox Text="testing"/>
<TextBox Margin="0,100,0,0" Style="{StaticResource TextBoxStyle2}" Text="testing"/>
</Grid>
And it works, so I think the content from the binding is empty and appears not be working.

Could someone give me some adviceabout WPF?

I am making a user control that is databound. The query results include a collection of objects (A) where A has a collction of other results (B). So A contains multilple B.
in the user control I want to represent the collection A as expanders and B as buttons inside of the expanders. This is what I got
<UserControl x:Class="GuideLib.ModuleControls.uclQuestions"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<ItemsControl x:Name="ictlAnswers" ItemsSource="{Binding}" Background="Gray">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander ExpandDirection="Down" Background="DarkGray">
<Expander.Header>
<TextBlock Text="{Binding Path=Name}" Foreground="White"/>
</Expander.Header>
<ListBox x:Name="SubListBox" ItemsSource="{Binding Path=Question}" Background="Gray" Foreground="White" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Button Content="{Binding Path=Name}" Margin="10,2,2,2" HorizontalAlignment="Stretch" Tag="{Binding Path=ID}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="Gray" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Orange" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I have multiple problems.
1: I can not get the buttons in the expanders to strech horizontally
2: How can I set the Tag property of the button to be the whole object of B
3: Why does the default mouseover effect still execute.
Thanks

Ok here goes:
1. You need to set HorizontalContentAlignment="Stretch" on the ListBox and on the StackPanel inside DataTemplate set Orientation="Vertical"
2. set Tag="{Binding .}" on the Button
3. Update your Button.Style to something like:
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Background"
Value="Gray" />
<Setter Property="OverridesDefaultStyle"
Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="Orange" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
finally before you add Question 4. remember ListBoxItem has a Style of it's own. So to completely override the effect on MouseOver when not on the Button but in the "Item" you have to provide a custom Style for ListBox.ItemContainerStyle
Oh and Start Using Snoop. It helps you debug Layout issues. Think you would have been able to solve problem 1 with it cos it would have shown you that your ContentPresenter of ListBoxItem was using required Width and not Stretching.

Just from taking a quick look at it.. for question 2 try doing this:
<Button Content="{Binding Path=Name}" Margin="10,2,2,2" HorizontalAlignment="Stretch" Tag="{Binding}">
That should make it bind to the items in the ListBox.