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>
Related
I have a user control that that consist of
a. A textblock whose content is bound to UserLabel
b. A textbox whose content is bound to UserValue.
When I add this user control to the Main Window, I want to add a subscript in the UserLabel, but do not know how to do that.
I want to do something like this (THE FOLLOWING CODE DOES NOT WORK. IT IS WHAT I WANT TO DO):
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:local="clr-namespace:MyNamespace"
Title="MyControl Sample"
Height="300"
Width="300">
<StackPanel>
<local:MyControl>
<UserLabel.Text>
Subscript<Run BaselineAlignment="Subscript" FontSize="12pt">This</Run>
<UserLabel.Text>
<local:MyControl>
</StackPanel>
</Window>
How can I achieve something like that?
Here is the XAML:
<UserControl x:Class="TEST.MyControl"
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="450" d:DesignWidth="800"
x:Name="parent">
<StackPanel Width="100" Orientation="Horizontal"
DataContext="{Binding ElementName=parent}">
<!-- User Label -->
<TextBlock Width="200" Name="UserLabel"
Text="{Binding Path=UserLabel}" >
</TextBlock>
<!-- User Input -->
<TextBox Width="100" Name="MetricValue"
Text="{Binding Path=UserValue}"/>
</StackPanel>
</UserControl>
and here is the CODE BEHIND:
/// <summary>
/// Interaction logic for MyControl.xaml
/// </summary>
public partial class MyControl: UserControl
{
public MyControl()
{
InitializeComponent();
}
#region User Label DP
public static readonly DependencyProperty UserLabelProperty =
DependencyProperty.Register("UserLabel",
typeof(string),
typeof(MyControl),
new PropertyMetadata(""));
public string UserLabel
{
get { return GetValue(UserLabelProperty) as String; }
set { SetValue(UserLabelProperty, value); }
}
#endregion // User Label DP
#region UserValue DP
public static readonly DependencyProperty UserValueProperty =
DependencyProperty.Register("UserValue",
typeof(string),
typeof(MyControl),
new PropertyMetadata(""));
public string UserValue
{
get { return GetValue(UserValueProperty) as String; }
set { SetValue(UserValueProperty, value); }
}
#endregion // UserValue DP
}
Make UserLabel a TextBlock instead of a string that has no concept of Run elements:
#region User Label DP
public static readonly DependencyProperty UserLabelProperty =
DependencyProperty.Register("UserLabel",
typeof(TextBlock),
typeof(MyControl));
public TextBlock UserLabel
{
get { return GetValue(UserLabelProperty) as TextBlock; }
set { SetValue(UserLabelProperty, value); }
}
#endregion // User Label DP
UserControl XAML:
<!-- User Label -->
<ContentControl Width="200" Content="{Binding UserLabel, ElementName=parent}" />
Window XAML:
<StackPanel>
<local:MyControl>
<local:MyControl.UserLabel>
<TextBlock>
<Run FontSize="12pt">Subscript</Run>
<Run BaselineAlignment="Subscript" FontSize="12pt">This</Run>
</TextBlock>
</local:MyControl.UserLabel>
</local:MyControl>
</StackPanel>
I made a usercontrol with several element inside (toggles, button, text box, etc...). I'm using this usercontrol inside an other one, and load this final usercontrol at runtime and on my final application. I'm a little lost with dependency property, I would like to access the properties of the very first from my application.
The first usercontrol is called "Ch_Parameters" :
<UserControl
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:CustomControlTest"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="CustomControlTest.ChannelParameters"
mc:Ignorable="d"
x:Name="Ch_Parameters"
d:DesignHeight="247.465" d:DesignWidth="436.624">
I'm trying to first communicate with a toggle button contained in "Ch_Parameters" and its properties "IsChecked"
<ToggleButton x:Name="Flip_X" Content="FLIP X" Style="{DynamicResource BaseToggleButtonStyle}" IsChecked="{Binding Path=DataContext.Flip_X, ElementName=Ch_Parameters, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
and here is a the code for the property
public static readonly DependencyProperty FlipXProperty =
DependencyProperty.Register("FlipX", typeof(bool), typeof(ChannelParameters), new PropertyMetadata(true));
[Bindable(true)]
public bool FlipX
{
get { return (bool)this.GetValue(FlipXProperty); }
set { this.SetValue(FlipXProperty, value); }
}
Now this usercontrol is used in other one called cmix :
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:CustomControlTest"
x:Name="cmix"
xmlns:System="clr-namespace:System;assembly=mscorlib" x:Class="CustomControlTest.C_MiX_UserInterface"
mc:Ignorable="d" d:DesignWidth="674.669" d:DesignHeight="337.953">
here :
<local:ChannelParameters FlipX="{Binding Path=Datacontext.VidFlipX, ElementName=cmix, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
and the code for the cmix property :
public static readonly DependencyProperty VidFlipXProperty =
DependencyProperty.Register("VidFlipX", typeof(bool), typeof(C_MiX_UserInterface), new PropertyMetadata(true));
[Bindable(true)]
public bool VidFlipX
{
get { return (bool)this.GetValue(VidFlipXProperty); }
set { this.SetValue(VidFlipXProperty, value); }
}
but, when I use the usercontrol "cmix" and load it at runtime, the property FLIPX from the Ch_Parameters usercontrol is not outputing anything when I trigger the toggle button.
var uiElement = (C_MiX_UserInterface)UIElementOut[i];
var toggle = uiElement.VidFlipX;
Is there a specific method to use properties from usercontrol inside an other usercontrol ?
Here is the solution that worked for me, as I in fact had the exact same problem :
Binding DependencyProperty in nested user controls
I'm most probably missing something obvious as I'm new to WPF development. I'm trying to create a Windows Phone 8.1 application and for my use I want to create a custom user control that contains hero information and hero icon (simple game-related information lookup app).
I have created a usercontrol with name HeroInformationControl and then defined an image and textblock in XAML. Looking up through various resources online I created it as follows:
<UserControl Name="HeroInformationControl"
x:Class="DotaHelper.HeroInformation"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DotaHelper"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="50"
d:DesignWidth="400">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="3*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image
HorizontalAlignment="Left"
Height="Auto"
Stretch="Fill"
VerticalAlignment="Top"
Width="Auto" Source="{Binding ElementName=HeroInformationControl, Path=HeroImage}"
/>
<TextBlock
Grid.ColumnSpan="2"
HorizontalAlignment="Center"
Height="50"
Grid.Column="1"
TextWrapping="Wrap"
Text="{Binding ElementName=HeroInformationControl, Path=HeroName}"
VerticalAlignment="Center"
Width="300"/>
Then, HeroInformation.xaml.cs:
public partial class HeroInformation
{
public HeroInformation()
{
this.InitializeComponent();
this.DataContext = this;
}
public static readonly DependencyProperty HeroNameProperty =
DependencyProperty.Register("HeroName", typeof(string), typeof(string), new PropertyMetadata(""));
public string HeroName
{
get { return (string)GetValue(HeroNameProperty); }
set { SetValue(HeroNameProperty, value); }
}
public static readonly DependencyProperty HeroImageProperty =
DependencyProperty.Register("HeroImage", typeof(string), typeof(string), new PropertyMetadata(""));
public string HeroImage
{
get { return (string)GetValue(HeroImageProperty); }
set { SetValue(HeroImageProperty, value); }
}
}
MainPage.xaml, HeroInformation object:
<local:HeroInformation
x:Name="HeroInformation1"
HorizontalAlignment="Left"
Height="Auto"
VerticalAlignment="Top"
Width="200"
/>
And from the UI thread in MainPage.xaml.cs:
HeroInformation1.HeroImage = hero.IMGurl;
HeroInformation1.HeroName = hero.Heroname;
Sorry for a long code but I have virtually no idea where the problem is.
As a note: hero.IMGUrl and hero.Heroname properties are both of string.
Also if I add to Mainpage.xaml properties by hand (HeroImage and HeroName) it loads.
Any help to understand what's wrong would be appreciated - also, if you spot something that is far from best programming practice I'd be grateful for tips.
Never. Ever. Ever. Do this:
this.DataContext = this;
Instead, give your UserControl an x:Name in your XAML file. Like this:
<UserControl x:Name="usr" ... >
This will allow you to bind to your Dependency Properties using the following binding:
Text="{Binding DataContext.HeroName, ElementName=usr}"
Alternatively, you can bind the UserControl to itself using the following:
DataContext="{Binding RelativeSource={RelativeSource Self}}"
And your binding will look like this:
Text="{Binding HeroName}"
EDIT: Also, as Juan has noticed, your Dependency Property declarations are incorrect:
public string HeroName
{
get { return (string)GetValue(HeroNameProperty); }
set { SetValue(HeroNameProperty, value); }
}
// Using a DependencyProperty as the backing store for HeroName. This enables animation, styling, binding, etc...
public static readonly DependencyProperty HeroNameProperty =
DependencyProperty.Register("HeroName", typeof(string), typeof(HeroInformation), new PropertyMetadata(null));
Pro-tip: Use propdp -> Tab -> Tab to declare a dependency property.
the only thing you missed was:
public static readonly DependencyProperty HeroNameProperty =
DependencyProperty.Register("HeroName", typeof(string), typeof(HeroInformation), new PropertyMetadata(""));
typeof(HeroInformation)
the rest is perfect and the way to do it. Might be the image give some issue (I cannot remember in all platforms (WPF,WP, UWP) if it is right use String for URI.
How can I create a user control like the Textbox? For example when I change the Text property of a Textbox control the new text appears on the window that I am currently working with.
In my project I have a lot of places where the user has to enter information therefore I want to create a InputField user control. (that usercontrol consists of a label an a textbox with custom style)
Here is the xaml for my user control:
<UserControl x:Class="PDV.UserControls.InputField"
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" >
<Grid>
<StackPanel>
<Label Content="{Binding Path=LblContent}" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBox Height="23" Margin="5,-5,2,2" Name="textBox1" VerticalAlignment="Top" />
</StackPanel>
</Grid>
</UserControl>
and the code behind for that user control:
namespace PDV.UserControls
{
public partial class InputField : UserControl
{
public static DependencyProperty MessageProperty = DependencyProperty.Register(
"LblContent", typeof(string), typeof(UserControl));
public string LblContent{
get{
return (string)GetValue(MessageProperty);
}
set{
SetValue(MessageProperty, value);
}
}
//Constructor
public InputField(){
InitializeComponent();
this.DataContext = this;
}
}
}
so on my main window I will be able to use that user control by:
1) importing the namespace where that user control is:
xmlns:myCtrl ="clr-namespace:PDV.UserControls"
2) placing that control in that window:
<myCtrl:InputField LblContent="hello" Margin="0,0,483,0" Height="49" VerticalAlignment="Top"></myCtrl:InputField>
What do I have to do so that when I update LblContent="hello" it renders on the window? It will be nice for it to render at design time not just at runtime
I think that the second type of might be InputField
public static DependencyProperty MessageProperty = DependencyProperty.Register(
"LblContent", typeof(string), typeof(InputField));
I never try to set the DataContext in your way, eventually try to give a name at the usercontrol x:Name="Root" then change the binding like this: Content="{Binding Path=LblContent, ElementName=Root}"
I have a custom usercontrol with DataContext="{Binding RelativeSource={RelativeSource self}}"
On the code behind i've made a dependency property like:
public static DependencyProperty ElementNameProperty = DependencyProperty.Register("ElementName",
typeof(string),
typeof(ElementControl),
new PropertyMetadata(new PropertyChangedCallback((s, e) => { new Base().OnPropertyChanged("ElementName"); })));
public string ElementName
{
get
{
return (string)base.GetValue(ElementNameProperty);
}
set
{
base.SetValue(ElementNameProperty, value);
}
}
Now when I try to use this usercontrol in my mainpage.xaml and use the following binding: <test.TestControl ElementName="{Binding name}" />, it keeps searching for 'name' property in my custom usercontrol instead of where it should come from?
What am I doing wrong ?
It searches there because you have the DataContext set on the topmost level for your user control. What you would need to do is get rid of the relative binding to self in the user control and specify ElementName in bindings (inside user control). Btw you probably don't need OnPropertyChanged in the PropertyChangedCallback cause DependencyProperties in their nature notify about value changes.
I eventually solved it this way. Not the way I wanted, but it's a (in my eyes) pretty neat solution.
CustomUserControl.xaml
<UserControl x:Class="TestApp.Controls.CustomUserControl"
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"
mc:Ignorable="d"
Width="75"
Height="75">
<Canvas x:Name="LayoutRoot"
Background="Black">
<StackPanel Orientation="Vertical">
<Image x:Name="UCImage"
Width="50"
Height="50"
HorizontalAlignment="Center" />
<TextBlock x:Name="UCText"
HorizontalAlignment="Center" />
</StackPanel>
</Canvas>
</UserControl>
CustomUserControl.xaml.cs
public partial class ElementControl : UserControl
{
#region DependencyProperty ElementNameProperty
public static DependencyProperty ElementNameProperty = DependencyProperty.Register("ElementName",
typeof(string),
typeof(ElementControl),
new PropertyMetadata(new PropertyChangedCallback((s, e) =>
{
//See Here
((ElementControl)s).UCText.Text = e.NewValue as string;
})));
public string ElementName
{
get
{
return (string)base.GetValue(ElementNameProperty);
}
set
{
base.SetValue(ElementNameProperty, value);
}
}
#endregion
}