We Keep Coding

Get property value WPF

I am trying get a value from a property but isn't working I always get a null value.
string imageNormal;
public static readonly DependencyProperty ImageNormalProperty =
DependencyProperty.Register("ImageNormal", typeof(string), typeof(MainWindow));
public string ImageNormal
{
get { return (string)GetValue(ImageNormalProperty); }
set { SetValue(ImageNormalProperty, value); }
}
public ButtonImageStyle()
{
InitializeComponent();
DataContext = this;
Console.WriteLine("Path: " + ImageNormal);
}
Xaml ButtonImageStyle.xaml:
<Image Source="{Binding ImageNormal}" Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" />
Xaml MainWindow.xaml:
<local:ButtonImageStyle HorizontalAlignment="Left" Height="60" VerticalAlignment="Top" Width="88" ImageNormal="C:/Users/Xafi/Desktop/add.png"/>
I always obtain next output:
Path:

since your ImageSource is have to be binded to it's parent DependencyProperty (which is defined to your code behind), you have to define your binding to be rlative to your UserControl (let's name it This). Thus please try to change your xaml in the next way:
Xaml code
<UserControl x:Class="SomeBindingExampleSOHelpAttempt.ButtonImageStyle"
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" x:Name="This">
<Grid>
<Image Source="{Binding ElementName=This, Path=ImageNormal, UpdateSourceTrigger=PropertyChanged}"
Stretch="None" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid></UserControl>
Here you can find an additional perfect answer.
Regards.

how to Hide buttons in usercontrol from main window?

I have a user control that have a multi buttons and In the application i use this user control on multi windows ,but i want to Collapsed (shown/hidden) some buttons if the user select in the application a window 1 and show same button if the user select in the application a window 2
UserControl
<Grid x:Name="girdBtuWidow" >
<StackPanel Orientation="Horizontal">
<Button Content="add" x:Name="add" Visibility="{Binding window1_Loaded}" x:FieldModifier="public" Height="50" Width="100" Margin="0" Click="add_click" />
<Button Content="show history" x:Name="Personal" Height="50" Width="100" Margin="0" />
<Button Content="Show Customer" x:Name="Customer" Height="50" Width="100" Margin="0" />
</StackPanel>
</Grid>
how to set the property (Visibility) of button in the User Control from the application window ?

You don't need to use a Window_Loaded Event here.
You need to expose a Visibility property for each of your buttons in your UserControls.
In your UserControl add a binding to each button for the Visibility property:
Visibility="{Binding AddButtonVisibility}"
Visibility="{Binding ShowHistoryButtonVisibility}"
Visibility="{Binding ShowCustomerButtonVisibility}"
Make sure you add a DataContext to your UserControl, I generally use Self:
DataContext="{Binding RelativeSource={RelativeSource Self}}"
In your UserControl Code Behind add Dependency Properties for each of the Bindings above:
public Visibility AddButtonVisibility
{
get { return (Visibility)GetValue(AddButtonVisibilityProperty); }
set { SetValue(AddButtonVisibilityProperty, value); }
}
// Using a DependencyProperty as the backing store for AddButtonVisibility. This enables animation, styling, binding, etc...
public static readonly DependencyProperty AddButtonVisibilityProperty =
DependencyProperty.Register("AddButtonVisibility", typeof(Visibility), typeof(UserControl1), new PropertyMetadata(Visibility.Visible));
public Visibility ShowHistoryButtonVisibility
{
get { return (Visibility)GetValue(ShowHistoryButtonVisibilityProperty); }
set { SetValue(ShowHistoryButtonVisibilityProperty, value); }
}
// Using a DependencyProperty as the backing store for ShowHistoryButtonVisibility. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ShowHistoryButtonVisibilityProperty =
DependencyProperty.Register("ShowHistoryButtonVisibility", typeof(Visibility), typeof(UserControl1), new PropertyMetadata(Visibility.Visible));
public Visibility ShowCustomerButtonVisibility
{
get { return (Visibility)GetValue(ShowCustomerButtonVisibilityProperty); }
set { SetValue(ShowCustomerButtonVisibilityProperty, value); }
}
// Using a DependencyProperty as the backing store for ShowCustomerButtonVisibility. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ShowCustomerButtonVisibilityProperty =
DependencyProperty.Register("ShowCustomerButtonVisibility", typeof(Visibility), typeof(UserControl1), new PropertyMetadata(Visibility.Visible));
In Visual Studio, There is a code snippet shortcut for Dependency Properties - type propdp and hit tab twice.
Now, to use the properties you have just created put the Usercontrol onto the relevant window:
<local:UserControl1 AddButtonVisibility="Collapsed" />
local is the project namespaces' alias - defined at the top of your Window. You can just drag and drop the UserControl onto your window, and it will do this for you. (You may need to rebuild in order to see your UserControls in your Toolbox.
You should now see your control with the Add Button collapsed.
For completeness sake, here is the XAML side of things:
UserControl Xaml:
<UserControl x:Class="WpfApplication2.UserControl1"
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"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Grid x:Name="girdBtuWidow" >
<StackPanel Orientation="Horizontal">
<Button Content="Add" x:Name="add" Height="50" Width="100" Margin="0" Click="Add_Click" Visibility="{Binding AddButtonVisibility}"/>
<Button Content="Show History" x:Name="Personal" Height="50" Width="100" Margin="0" Click="ShowHistory_Click" Visibility="{Binding ShowHistoryButtonVisibility}" />
<Button Content="Show Customer" x:Name="Customer" Height="50" Width="100" Margin="0" Click="ShowCustomer_Click" Visibility="{Binding ShowCustomerButtonVisibility}"/>
</StackPanel>
</Grid>
Window1.Xaml:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication2" x:Class="WpfApplication2.Window1"
Title="Window1" Height="300" Width="308">
<Grid>
<local:UserControl1 HorizontalAlignment="Left" VerticalAlignment="Top" AddButtonVisibility="Collapsed" />
</Grid>

public static readonly DependencyProperty onBackVisibilityProperty =
DependencyProperty.Register("onBackVisibility", typeof(Visibility), typeof(MyToolBar), new PropertyMetadata(Visibility.Visible));
public Visibility onBackVisibility
{
get { return (Visibility)GetValue(onBackVisibilityProperty); }
set { SetValue(onBackVisibilityProperty, value); }
}

public static readonly DependencyProperty onBackVisibilityProperty =
DependencyProperty.Register("onBackVisibility", typeof(Visibility), typeof(MyToolBar), new PropertyMetadata(Visibility.Visible));
public Visibility onBackVisibility
{
get { return (Visibility)GetValue(onBackVisibilityProperty); }
set { SetValue(onBackVisibilityProperty, value); }
}
//After this goto xaml

Button Name="tbrBack"
ToolTip="{DynamicResource Back}"
VerticalAlignment="Center"
VerticalContentAlignment="Center"
Click="tbrBack_Click"
Visibility="{Binding onBackVisibility ,ElementName = usercontrol}

What is the datacontext of the user control?

I have a user control like so:
<Grid>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding NameC}" Width="100" />
<TextBlock Text="{Binding Filename}" />
</StackPanel>
</Grid>
with DP in code behind:
public TestUc()
{
InitializeComponent();
DataContext = this;
}
public static readonly DependencyProperty NameCProperty = DependencyProperty.Register(
"NameC", typeof(string), typeof(TestUc), new PropertyMetadata(default(string)));
public string NameC
{
get { return (string) GetValue(NameCProperty); }
set { SetValue(NameCProperty, value); }
}
public static readonly DependencyProperty FilenameProperty = DependencyProperty.Register(
"Filename", typeof (string), typeof (TestUc), new PropertyMetadata(default(string)));
public string Filename
{
get { return (string) GetValue(FilenameProperty); }
set { SetValue(FilenameProperty, value); }
}
Now, when using it in a window,
this works fine:
<Window x:Class="TestDpOnUc.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:uc="clr-namespace:TestDpOnUc"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<uc:TestUc NameC="name is xxx" Filename="This is filename" />
</Grid>
But This does not:
<Window x:Class="TestDpOnUc.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:uc="clr-namespace:TestDpOnUc"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<uc:TestUc NameC="{Binding Name}" Filename="{Binding FileName}" />
</Grid>
public MainWindow()
{
InitializeComponent();
DataContext = this;
Name = "name is nafsafd";
FileName = "lkjsfdalkf";
}
private string _Name;
public string Name
{
get { return _Name; }
set
{
_Name = value;
OnPropertyChanged();
}
}
private string _FileName;
public string FileName
{
get { return _FileName; }
set
{
_FileName = value;
OnPropertyChanged();
}
}
Can someone please explain why? Why is the datacontext of the user control not automatically set to the parent - the main window?

It's because of this line DataContext = this in UserControl constructor. You set DataContext to your user control which affects default binding context for TestUc and all children, including <uc:TestUc ... />. So at the moment
<uc:TestUc NameC="{Binding Name}" Filename="{Binding FileName}" />
will look for Name and FileName properties inside UserControl. You need to remove that line but that will break bindings within the user control.
<TextBlock Text="{Binding NameC}" Width="100" />
<TextBlock Text="{Binding Filename}" />
Will look for NameC and Filename in MainWindow. Solution to that is to change binding context, per binding, via either RelativeSource or ElementName binding inside UserControl
<UserControl ... x:Name="myUserControl">
<Grid>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding ElementName=myUserControl, Path=NameC}" Width="100" />
<TextBlock Text="{Binding ElementName=myUserControl, Path=Filename}" />
</StackPanel>
</Grid>
</UserControl>

When creating a UserControl with DependencyProperties you have to bind your DP's within your UserControl with ElementName- or RelativeSource Binding to your Controls in your UserControl
<TextBlock Text="{Binding ElementName=myUserControl, Path=NameC}" Width="100" />
and you never set the DataContext.
DataContext = this; <-- do not do that within your UserControl
When you wanna use your UserControl you put it in your View and bind the Properties of your actual DataContext/Viewmodel to the DependencyProperties of the UserControl.
<uc:TestUc NameC="{Binding Name}" Filename="{Binding FileName}" />

Whe you are doing <uc:TestUc NameC="{Binding Name}" Filename="{Binding FileName}" /> its not looking at MainWindow's data context instead at your UserControl's data context.
So you might want to search for the right element and bind it. Below is one way to do it using ElementName by giving a name to Window like MainWindowName. Or you can also use relative source to search for its ancestor.
<Window x:Class="TestDpOnUc.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:uc="clr-namespace:TestDpOnUc"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
x:Name="MainWindowName">
<Grid>
<uc:TestUc NameC="{Binding Element=MainWindowName, Path=DataContext.Name}" Filename="{Binding Element=MainWindowName, Path=DataContext.FileName}" />
</Grid>

How do I manage the width of controls through UserControl parameters?

In short, the goal is to propagate LabelWidth to its children in my UserControl class, PropertyView. See this fragment:
<TabItem.Header>Press</TabItem.Header>
<TabItem.DataContext>
<Binding XPath="press_information"/>
</TabItem.DataContext>
<W3V:PropertyView LabelWidth="200"></W3V:PropertyView>
ANSWER (credit to Athari for his part). To make it work, I needed two elements: In C#, a dependency property:
public double LabelWidth
{ get { return (double)this.GetValue(LabelWidthProperty); }
set { this.SetValue(LabelWidthProperty, value); }
}
public static readonly DependencyProperty LabelWidthProperty =
DependencyProperty.Register(
"LabelWidth", typeof(double), typeof(PropertyView), new PropertyMetadata(100.0)
);
In XAML, the following binding syntax:
<W3V:SimpleControl x:Name="simple" Content="{Binding}"
LabelWidth="{Binding LabelWidth,
RelativeSource={RelativeSource AncestorType=W3V:PropertyView}}" />
What didn't work (my original problem):
See the ????? below in the XAML code. I have NO IDEA what I can put in to make it so the SimpleControl will get a LabelWidth assigned, so that it will set its TextBlock's Width property.
I don't even care what approach is taken, it just needs to deal with the fact that PropertyView is bound to an XML object so it can display its properties, and LabelWidth needs to be a property the control-user sets that gets shoved down into the control. LabelWidth will vary depending on what object is being displayed, so it can't be global.
<UserControl x:Class="W3.Views.PropertyView" ... >
<UserControl.Resources>
</UserControl.Resources>
<StackPanel Margin="2" CanVerticallyScroll="true">
<Border Height="22">
<TextBlock VerticalAlignment="Bottom"
Text="{Binding XPath=#label}"
FontSize="16" FontWeight="Bold" />
</Border>
<ItemsControl ItemsSource="{Binding XPath=*}" Margin="20,0,0,0">
<ItemsControl.ItemTemplate>
<DataTemplate>
<W3V:SimpleControl x:Name="simple"
Content="{Binding}"
LabelWidth=?????? />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</UserControl>
C#:
public partial class PropertyView : UserControl
{
public double LabelWidth
{
get { return (double)this.GetValue(LabelWidthProperty); }
set { this.SetValue(LabelWidthProperty, value); }
}
public static readonly DependencyProperty LabelWidthProperty =
DependencyProperty.Register(
"LabelWidth2", typeof(double), typeof(PropertyView), new PropertyMetadata(0.0)
);
public PropertyView()
{
InitializeComponent();
}
}
I've searched extensively for a solution that deals with this combination of circumstances, tried many things without success (well, success for simpler situations, but not this), and I'm at a loss here.

Answer to edited question
Here's another go for your problem based on refined question. I'm still not 100% sure what you are trying to achieve but maybe the following points you to right direction, at least.
So there's a Window containing only UserControl. This user control is bound to XML file and it has three label fields. One shows node attritube and the following XML file content. First label's width is bound to property in MainWindow and the other to static converter resource inside the UserControl.
MainWindow XAML
<Window x:Class="WpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:user="clr-namespace:WpfApplication"
Title="MainWindow" Height="350" Width="600">
<Grid>
<user:XmlUserControl />
</Grid>
</Window>
MainWindow Codebehind
using System;
using System.Windows;
namespace WpfApplication
{
public partial class MainWindow : Window
{
readonly Random _random = new Random();
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
public double ControlWidth
{
get { return _random.Next(200, 600); }
}
}
}
XmlUserControl XAML
<UserControl x:Class="WpfApplication.XmlUserControl"
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"
xmlns:local="clr-namespace:WpfApplication2"
mc:Ignorable="d"
d:DesignHeight="350" d:DesignWidth="350">
<StackPanel>
<StackPanel.Resources>
<XmlDataProvider x:Key="XmlData" XPath="Data/Items" Source="Items.xml" />
<local:NodeWidthConverter x:Key="NodeWidthConverter" />
</StackPanel.Resources>
<ItemsControl>
<ItemsControl.ItemsSource>
<Binding Source="{StaticResource XmlData}" XPath="*"/>
</ItemsControl.ItemsSource>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Label x:Name="Title" VerticalAlignment="Bottom"
FontWeight="Bold" HorizontalAlignment="Left"
Content="{Binding XPath=#Title}" />
<Label Background="BurlyWood" HorizontalAlignment="Left"
Content="{Binding}" Width="{Binding ControlWidth}" />
<Label Background="BlanchedAlmond" HorizontalAlignment="Left"
Content="{Binding}" Width="{Binding ElementName=Title, Converter={StaticResource NodeWidthConverter}}"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</UserControl>
XmlUserControl codebehind
using System.Windows.Controls;
namespace WpfApplication
{
public partial class XmlUserControl : UserControl
{
public XmlUserControl()
{
InitializeComponent();
}
}
}
NodeWidthConverter
using System;
using System.Globalization;
using System.Windows.Data;
namespace WpfApplication2
{
public class NodeWidthConverter : IValueConverter
{
public static Random Random = new Random();
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return Random.Next(200, 600);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
Items.xml sample data
<Data>
<Items>
<Item Title="Title 1">
<Name>This is item name 1</Name>
<Summary>Summary for item 1</Summary>
</Item>
<Item Title="Title 2">
<Name>This is item name 2</Name>
<Summary>Summary for item 2</Summary>
</Item>
<Item Title="Title 3">
<Name>This is item name 3</Name>
<Summary>Summary for item 3</Summary>
</Item>
</Items>
</Data>
With this you'll get the following. Label has colored background to visualize the changing width properties.
Hope this helps!

So, you just need to bind SimpleControl.LabelWidth to PropertyView.LabelWidth? It can be achieved this way:
<W3V:SimpleControl
LabelWidth="{Binding Path=LabelWidth,
RelativeSource={RelativeSource AncestorType=PropertyView}}"
P.S. Your dependency property is registered as "LabelWidth2" (typo?). And new PropertyMetadata(0.0) is redundant, as default(double) == 0.0.

Do you have a failed binding back to your StaticResources? Do you have values defined in the resources section? Try something like this (note that I wrote this directly here (not in VS), it should be pretty much correct :)
<UserControl ...>
<UserControl.Resources>
<System.Int x:Key="ContentWidth">100</System.Int>
</UserControl.Resources>
<StackPanel Orientation="Horizontal" >
<TextBlock Width="{StaticResource LabelWidth}" Text="test"/>
<TextBox Width="{StaticResource ContentWidth}" />
</StackPanel>
</UserControl>
I would ask if you are really intending to go to StaticResources or whether you meant to bind to a property on a viewmodel or in the code behind of the view?

Binding to a userControl which contains custom control

I want to use the ToggleSwitch control of the WPF Spark project
So I created a UserControl which contains a ToggleSwitch control and configures it (color, size, etc).
<UserControl x:Class="WpfControls.ToggleSwitch.MyToggleSwitchControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toggleSwitch="clr-namespace:WpfControls.ToggleSwitch"
d:DesignHeight="300"
d:DesignWidth="300"
mc:Ignorable="d">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/WpfControls;component/ToggleSwitch/ToggleSwitch.Generic.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<toggleSwitch:ToggleSwitch x:Name="Toggle"
Width="54"
Height="21"
Margin="0"
Background="Black"
BorderThickness="2"
CheckedForeground="White"
CheckedText="Yes"
CheckedToolTip=""
CornerRadius="10"
FontFamily="Tahoma"
FontSize="10"
FontWeight="Normal"
IsCheckedLeft="False"
Padding="0"
ThumbBorderThickness="2"
ThumbCornerRadius="21"
ThumbGlowColor="Gray"
ThumbShineCornerRadius="20,20,0,0"
ThumbWidth="35"
UncheckedForeground="Black"
UncheckedText="No"
UncheckedToolTip="No">
</toggleSwitch:ToggleSwitch>
</Grid>
</UserControl>
The ToggleSwitch is a CustomControl which overrides the standard WPF ToggleButton.
Now I want to use the ToggleButton property IsChecked in my XAML for Binding.
<toggleSwitch:MyToggleSwitchControl IsChecked="{Binding IsChecked}" />
How can I achieve that?

Create in code-behind DependencyProperty:
public bool IsToggleChecked
{
get { return (bool)GetValue(IsToggleCheckedProperty); }
set { SetValue(IsToggleCheckedProperty, value); }
}
public static readonly DependencyProperty IsToggleCheckedProperty =
DependencyProperty.Register("IsToggleChecked", typeof(bool), typeof(MyToggleSwitchControl), new PropertyMetadata(false));
and bind it to IsChecked property of your ToggleSwitch:
<toggleSwitch:ToggleSwitch IsChecked="{Binding RelativeSource={RelativeSource AncestorLevel=1,AncestorType=UserControl,Mode=FindAncestor}, Path=IsToggleChecked}"
After doing this you'll be able to do:
<toggleSwitch:MyToggleSwitchControl IsToggleChecked="{Binding IsChecked}" />

You could use an dependency property.
In your custom control add a dependency property like this:
public static readonly DependencyProperty IsCheckedProperty =
DependencyProperty.Register("IsChecked", typeof(bool),
typeof(MyToggleSwitchControl), null);
// .NET Property wrapper
public bool IsChecked
{
get
{
return (bool)GetValue(IsCheckedProperty);
}
set { SetValue(IsCheckedProperty, value); }
}