Develop Reference

Using DependencyProperty to Display Placeholder Text on a TextBox (UWP)

I have a custom user control which consists only a TextBox, I want to be able to bing a Placeholder text to that Textbox. My UserControl code is like this
<UserControl
x:Class="Proj.Editors.EditTextControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MemberSuiteConsoleApp.Controls.Editors"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<TextBox x:Name="txtbox" Width="300" PlaceholderText="{Binding ElementName=txtbox, Path=DataContext.PlaceholderText}"></TextBox>
</Grid>
public sealed partial class EditTextControl : UserControl
{
public EditTextControl()
{
this.InitializeComponent();
}
public string PlaceholderText
{
get { return (string)GetValue(PlaceholderTextProperty); }
set { SetValue(PlaceholderTextProperty, value); }
}
// Using a DependencyProperty as the backing store for PlaceholderText. This enables animation, styling, binding, etc...
public static readonly DependencyProperty PlaceholderTextProperty =
DependencyProperty.Register("PlaceholderText", typeof(string), typeof(EditTextControl), new PropertyMetadata(""));
}
And I am trying to use this UserControl in my page like this in my Page
<Grid>
<editors:EditTextControl PlaceholderText="My placeholder" Height="400"></editors:EditTextControl>
</Grid>
But for some reason, Placeholder text is not showing in Textbox, What I am missing here?

You can use x:Bind instead. I tried and works.
<TextBox x:Name="txtbox" Width="300" PlaceholderText="{x:Bind PlaceholderText, Mode=OneWay}"></TextBox>

Trivial binding to property of a UserControl - not working yet no errors [duplicate]

This question already has answers here:
Issue with DependencyProperty binding
(3 answers)
How to correctly bind to a dependency property of a usercontrol in a MVVM framework
(4 answers)
Closed 4 years ago.
I am attempting to get to grips with DataBinding, and I have just started to introduce UserControls into the mix, but it appears I cannot even get the most basic example working.
I have a MainWindow that contains a property (Subtitle) along with an instance of a UserControl. A property of the UserControl (LabelContent) is bound to the Subtitle property. The expected result is that changing the Subtitle property of MainWindow will update the LabelContent property of the UserControl, which is bound to the actual Content property of a Label within the UserControl:
I have MainWindow.xaml:
<Window x:Class="WpfApp1.MainWindow"
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:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<local:UserControlSample LabelContent="{Binding Subtitle}"/>
With the following code behind (MainWindow.cs):
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
Subtitle = "Test";
}
public String Subtitle
{
get;
set;
}
}
UserControlSample.xaml:
<UserControl x:Class="WpfApp1.UserControlSample"
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:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Label Content="{Binding Path=LabelContent}"/>
UserControl.cs:
public partial class UserControlSample : UserControl
{
public static DependencyProperty LabelContentProperty = DependencyProperty.Register("LabelContent", typeof(String), typeof(UserControlSample));
public UserControlSample()
{
InitializeComponent();
DataContext = this;
}
public String LabelContent
{
get { return (String)GetValue(LabelContentProperty); }
set { SetValue(LabelContentProperty, value); }
}
}
I believe it is something to do with DataContexts however I do not understand them too well as yet. If I change UserControl to the following, then I achieve the expected results. However this does not explain the reasons why the original code fails:
UserControlSample.xaml
<Label Content="{Binding Path=Subtitle}"/>
UserControl.cs
public UserControlSample()
{
InitializeComponent();
}

You would need changes at two places,
First in Xaml, you need to set the source object of the Binding to the UserControl
<Label Content="{Binding Path=LabelContent,RelativeSource={RelativeSource AncestorType=UserControl}}" />
Secondly,
public UserControl1()
{
InitializeComponent();
}
That should allow you to bind the User Control correctly

WPF and Caliburn Not Binding Nested UserControl

I'm simply trying to create a binding for a UserControl within a UserControl using WPF/Caliburn, but I am having trouble properly binding the nested UserControl.
The basic layout is a ShellViewModel : Conductor, and within the ShellView there is a ContentControl that is populated by the ShellViewModel.ActivateItem method that loads a UserControl (PageViewModel), and within the PageView UserControl there is a nested UserControl called "SimpleControl".
The binding works when the page loads (it displays the "Initial Text Value" string in the nested UserControl), but it does not appear to be bound to the PropertyChanged event on PageView (and never updates its value when the test button is pressed). The Label in the Parent UserControl (PageView) is bound correctly/updates as expected.
PageView.xaml:
<UserControl x:Class="CaliburnTest.Views.PageView"
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:CaliburnTest.Views"
xmlns:cal="http://www.caliburnproject.org"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<StackPanel Background="Aqua">
<Label Content="{Binding TextLabelTest, FallbackValue=DEFAULT}"></Label>
<local:SimpleControl cal:Bind.Model="WPFCaliburnTemplate.Views.PageView" TextValue="{Binding TextLabelTest}"></local:SimpleControl>
<Button Name="UpdateTextButton">Update Text</Button>
</StackPanel>
</UserControl>
PageViewModel.cs:
using Caliburn.Micro;
namespace CaliburnTest.ViewModels
{
public class PageViewModel : Screen
{
private string _textLabelTest;
public string TextLabelTest
{
get { return _textLabelTest; }
set
{
_textLabelTest = value;
NotifyOfPropertyChange(() => TextLabelTest);
}
}
public PageViewModel()
{
TextLabelTest = "Initial Text Value";
}
public void UpdateTextButton()
{
TextLabelTest = "Updated Text Value";
}
}
}
SimpleControl.xaml:
<UserControl x:Class="CaliburnTest.Views.SimpleControl"
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:cal="clr-namespace:Caliburn.Micro;assembly=Caliburn.Micro.Platform.Core"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Border Margin="10" BorderThickness="1" BorderBrush="#FF9A9A9A">
<StackPanel>
<Label Name="TextLabel"></Label>
</StackPanel>
</Border>
</UserControl>
And finally SimpleControl.xaml.cs:
using System.Windows;
using System.Windows.Controls;
namespace CaliburnTest.Views
{
public partial class SimpleControl : UserControl
{
public SimpleControl()
{
InitializeComponent();
}
public static DependencyProperty TextValueProperty = DependencyProperty.Register("TextValue", typeof(string), typeof(SimpleControl),
new FrameworkPropertyMetadata("", TextValueChangedCallBack));
public string TextValue
{
get { return (string)GetValue(TextValueProperty); }
set
{
SetValue(TextValueProperty, value);
Refresh();
}
}
protected static void TextValueChangedCallBack(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
(sender as SimpleControl).TextValue = (string)e.NewValue;
}
private void Refresh()
{
TextLabel.Content = TextValue;
}
}
}
I have been banging on this all day and cannot figure out what I'm doing wrong. I've tried all combinations of different DataContexts, RelativeSources, and whatever else I can find on SO and Google but am still coming up short. I have a much more complicated custom UserControl I'm trying to work with but I created this simple example to try and figure out the issue.

I played around with all sorts of combinations and I believe I found a result that appears to work, though I'm not entirely sure why:
First, I changed the way I was binding the "TextValue" dependency property to:
<local:SimpleControl TextValue="{Binding RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type UserControl}}, Path=DataContext.TextLabelTest}" />
However, this was still only working for the initial value and the binding was not updating when the string was updated. In the end, I had to edit SimpleControl.xaml.cs like so:
protected static void TextValueChangedCallBack(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
// (sender as SimpleControl).TextValue = (string)e.NewValue;
(sender as SimpleControl).Refresh();
}
As you can see, I commented out the line setting the SimpleControl.TextValue (and in turn setting the TextValueProperty DependencyProperty) and simply called the SimpleControl.Refresh() method to update the label. I'm not sure why setting the TextValueProperty was breaking the DependencyProperty (even though it was already set when the string updated), but I think I need to go brush up on some MSDN articles!

How to add a use UserControl containing List in Windows 8.1 App?

I want add a list in UserControl and its values are coming from Json. So how can I bind those values into UserControl from another page and also I want to add a SelectionChanged Event for it.
The scenario is as below:
I have a xaml page containing an image plugin(image). On clicking on Image I want to open UserControl containing list values( for e.g. Take Photo, Select from Library,Record Video and Cancel). Once the user selects the item based on that different method are called.
I was achieving the same approach using CustomMessageBox in Windows Phone 8 but that is not available and I may need to use UserControl to achieve this.
Please guide me for this.
Update
What I have tried so far.
UserControl.Xaml
<UserControl
x:Class="TestApp.Resources.CameraPluginOptions"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyCouncilServices.Resources"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<ListView x:Name="CameraPlugin"
ItemContainerStyle="{StaticResource GenericListViewContainerStyle}"
ItemTemplate="{StaticResource EvidenceListItemTemplate}"
ItemSource="{Binding ItemSource}"
/>
</Grid>
UserControl.xaml.cs
public sealed partial class CameraPluginOptions : UserControl
{
public event EventHandler SelectionChanged;
public List<SUBPARAM> ItemSource
{
get { return (List<SUBPARAM>)GetValue(evidenceItemSourceproperty); }
set { SetValue(evidenceItemSourceproperty, value); }
}
public static readonly DependencyProperty evidenceItemSourceproperty =
DependencyProperty.Register("ItemSource", typeof(List<SUBPARAM>),
typeof(CameraPluginOptions), new PropertyMetadata(0));
public SUBPARAM SelectedOption
{
get { return (SUBPARAM)GetValue(selectedoptionproperty);}
set { SetValue(selectedoptionproperty,value); }
}
public static readonly DependencyProperty selectedoptionproperty =
DependencyProperty.Register("SelectedOption", typeof(SUBPARAM),
typeof(CameraPluginOptions), new PropertyMetadata(0));
private void PluginSelectionChanged(object sender,SelectionChangedEventArgs e)
{
if(SelectionChanged !=null)
SelectionChanged(this,new EventArgs());
}
public CameraPluginOptions()
{
this.InitializeComponent();
}
}
The Page from which I want to use UserControl
TestUserControlPage.xaml.cs
PluginControl.DataContext = new EvidenceSource(){ItemSource=MCSManager.Instance.currentClientParams.EVIDENCE_MENU.SUB_PARAMS};
PluginControl.SelectionChanged += MediaListSelectionChanged;
TestUSerControl.xaml where I am using UserControl
<Grid x:Name="imagePlugin"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Height="400"
Width="600"
Visibility="Collapsed"
xmlns:local="using:TestApp.Resources">
<local:CameraPluginOptions x:Name="PluginControl"
/>
What I actually want to do is bind the list which I get from Json into UserControl ListBox.Itemsource and then I want to have SelectionChanged Event on same page from which UserControl is called. When a user selects an Item particular action should take place.

How to bind Visibility to element which is passed as parameter in User Control?

I have User control which looks like this:
public partial class TopBarUserControl : UserControl
{
public System.Windows.Visibility menuVisibility { get; set; }
public TopBarUserControl()
{
InitializeComponent();
}
}
And I render it in my other page with:
<local:TopBarUserControl />
It works fine but I want to hide some part of my Control. So I pass the parameter to control with:
<local:TopBarUserControl menuVisibility="Collapsed" />
But I don't know how to make it works fine (hide my elements).
What I have tried:
in xaml control:
Visibility="{Binding menuVisibility}"
or set it in code behind but I don't know where it should be setted.

Two things here, first you should ideally declare the property as a DependencyProperty, so you can bind against it and get automatic change notification to update the UI at the right time. Then, you need to correct the binding, so that it points to the property declared at the UserCoontrol level (as you wrote it, it binds to the DataContext, which may not be set.
Try this, in XAML:
<UserControl x:Class="WpfApplication1.TopBarUserControl"
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="MainControl"> <!--Give a XAML name to the whole control to bind to properties declared in code-behind-->
<Menu Visibility="{Binding ElementName=MainControl, Path=MenuVisibility}"/>
</UserControl>
Notice the binding has an ElementName matching the x:Name at the control level.
The convert your property to DependencyProperty:
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication1
{
public partial class TopBarUserControl : UserControl
{
public static readonly DependencyProperty MenuVisibilityProperty = DependencyProperty.Register("MenuVisibility", typeof(Visibility), typeof(TopBarUserControl), null);
public Visibility MenuVisibility
{
get { return (Visibility)GetValue(MenuVisibilityProperty); }
set { SetValue(MenuVisibilityProperty, value); }
}
public TopBarUserControl()
{
InitializeComponent();
}
}
}