I have a custom UserControl with an image and a label, both of which are set at design-time in the XAML like so: <controls:HomeBarButton Icon="/SuCo;component/Resources/music.png" Text="music"/>
When the control has just an Icon, it looks fine. When I add the Text property, the icon disappears at both design- and run-time and the text label ignores the formatting set in the UserControl and is just black in the upper left corner of the control when the label is centered.
Relevant UserControl XAML:
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<Image x:Name="icon" Width="102" Height="102" VerticalAlignment="Stretch" Source="{Binding Icon}"/>
<Label x:Name="label" HorizontalContentAlignment="Center" VerticalAlignment="Bottom" Foreground="White" FontFamily="Calibri" FontSize="24" Padding="0" Content="{Binding Text}"></Label>
</StackPanel>
Code-behind:
public ImageSource Icon
{
get { return (ImageSource)this.GetValue(IconProperty); }
set { this.SetValue(IconProperty, value); }
}
public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(ImageSource), typeof(HomeBarButton), new FrameworkPropertyMetadata(OnIconChanged));
private static void OnIconChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
dependencyObject.SetValue(Image.SourceProperty, e.NewValue);
}
public string Text
{
get { return (string)this.GetValue(TextProperty); }
set { this.SetValue(TextProperty, value); }
}
public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(HomeBarButton), new FrameworkPropertyMetadata(OnTextChanged));
private static void OnTextChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
dependencyObject.SetValue(Label.ContentProperty, e.NewValue);
}
What am I doing wrong? :(
First, I would change that Label to a TextBlock--you would use Label to associate the text of the label with another control. It seems, from your code, that you are not doing this and only want to display the text. The other thing to check is if your text is being displayed over the top of your icon. I would guess that this is what is happening. Changing to a TextBlock may fix this, if not, you probably should set the height and with of the TextBlock manualy. Just my .02 worth.
Related
I have a UserControl that has a Grid with a Background property that is bound. All of my other bindings work as expected, but for some reason, the only color I get in my UserControl is the default value I set for the DependencyProperty.
Referencing the UserControl in MainWindow.xaml:
<controls:MyUserControl Title="{Binding Path=MyObjects[0].Title" MyControlColor="{Binding Path=MyObjects[0].Color}" />
Title shows up as expected but the color is unchanged.
MyUserControl code (I use MyControlColorBrush for the color source, which just converts MyControlColor to a SolidColorBrush. Code on down.):
<Grid Background="{Binding Path=MyControlColorBrush, RelativeSource={RelativeSource AncestorType=UserControl}}">
<TextBlock Text="{Binding Path=Title, RelativeSource={RelativeSource AncestorType=UserControl}}" />
</Grid>
MyUserControl.xaml.cs code:
public Color MyControlColor
{
get { return (Color)GetValue(MyControlColorProperty); }
set { SetValue(MyControlColorProperty, value); }
}
public static readonly DependencyProperty MyControlColorProperty = DependencyProperty.Register("MyControlColor", typeof(Color), typeof(MyUserControl), new PropertyMetadata(Colors.Black));
And then a property that just converts the color to a SolidColorBrush:
public SolidColorBrush MyControlColorBrush
{
get { return new SolidColorBrush(MyControlColor); }
}
Any ideas on what I could be missing? If I check the value of MyControlColor, it's showing the right color, but the background of the Grid just isn't changing from Black.
The binding to MyControlColorBrush only happens once when your page is first loaded. Your binding to MyObjects[0].Color is causing your dependency property to update but there's nothing indicating to the rest of your app that MyControlColorBrush needs to be updated as well.
There are a few ways to achieve this, the easiest is probably to just create a read-only dependency property for your brush that you update whenever you detect a change in your color property (this is similar to how the Width/ActualWidth properties work). Your control will need a DP for the color:
public Color MyControlColor
{
get { return (Color)GetValue(MyControlColorProperty); }
set { SetValue(MyControlColorProperty, value); }
}
public static readonly DependencyProperty MyControlColorProperty =
DependencyProperty.Register("MyControlColor", typeof(Color), typeof(MyUserControl),
new PropertyMetadata(Colors.Black, OnColorChanged));
And then a read-only DP for the brush:
public Brush MyControlColorBrush
{
get { return (Brush)GetValue(MyControlColorBrushProperty); }
protected set { SetValue(MyControlColorBrushPropertyKey, value); }
}
private static readonly DependencyPropertyKey MyControlColorBrushPropertyKey
= DependencyProperty.RegisterReadOnly("MyControlColorBrush", typeof(Brush), typeof(MyUserControl),
new FrameworkPropertyMetadata(Brushes.Black, FrameworkPropertyMetadataOptions.None));
public static readonly DependencyProperty MyControlColorBrushProperty = MyControlColorBrushPropertyKey.DependencyProperty;
And you'll update the brush whenever your color DP changes:
private static void OnColorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
(d as MyUserControl).MyControlColorBrush = new SolidColorBrush((Color)e.NewValue);
}
GUI elements in your custom control then bind to the read-only DP, e.g.:
<Grid Background="{Binding Path=MyControlColorBrush, RelativeSource={RelativeSource AncestorType=local:MyUserControl}}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
I have set up in a view the height of a control using dockpanels and alignments.
I want to use the computed size of this control as an input for another control in another view.
MainWindow
<StackPanel>
<local:View1 />
<local:View2 />
</StackPanel>
View1
<DockPanel>
...
<Button x:Name="myButton" />
...
</DockPanel>
View2 (where I want to bind the button's height to the first view)
<Button Height="{Binding Path=Button.Height, RelativeSource={RelativeSource AncestorType={x:Type local:View1}}}" />
But it does not work...
I am looking if possible for a xaml-only solution with binding...
You may want to try using dependency properties in order to achieve this. Here is a sample based on your case:
View1:
<DockPanel>
<Button x:Name="myButton" Content="Button in view1" FontSize="32"/>
</DockPanel>
View1 codebehind. Notice that we handle loaded event in order to get the actual height of the button and to assign its value to the DependencyProperty we created:
public static readonly DependencyProperty ButtonHeightProperty = DependencyProperty.Register(
"ButtonHeight", typeof (double), typeof (View1), new PropertyMetadata(default(double)));
public double ButtonHeight
{
get { return (double) GetValue(ButtonHeightProperty); }
set { SetValue(ButtonHeightProperty, value); }
}
public View1()
{
InitializeComponent();
}
private void View1_OnLoaded(object sender, RoutedEventArgs e)
{
ButtonHeight = myButton.ActualHeight;
}
Then in view2 we bind the button height to another dependency property in that user control:
And in view2 codebehind:
public static readonly DependencyProperty ButtonHeightProperty = DependencyProperty.Register(
"ButtonHeight", typeof (double), typeof (View2), new PropertyMetadata(default(double)));
public double ButtonHeight
{
get { return (double) GetValue(ButtonHeightProperty); }
set { SetValue(ButtonHeightProperty, value); }
}
public View2()
{
InitializeComponent();
}
Finally the mainWindow xaml looks like this:
<StackPanel>
<local:View1 x:Name="View1"/>
<local:View2 ButtonHeight="{Binding ElementName=View1,Path=ButtonHeight}"/>
</StackPanel>
And the output:
Hope this helps
I have a DialogPrompt UserControl that will have an Image and a TextBlock. Here is the template:
<UserControl>
<Button x:Name="_OkButton" Content="OK"/>
<DockPanel >
<Image/>
<TextBlock x:Name="_DialogTextBox" />
</DockPanel>
</UserControl>
How do I expose Source property of the Image and Text property of the TextBlock inside my UserControl?
I would create two DependencyProperties, one for the Text and one for the Image Source.
The Image Source DependencyProperty will automatically set the inner Image control's source whenever it is updated. Similarly, the Text DependencyProperty will be setting the Text of the inner TextBlock control as well.
Here is the setup:
public partial class MyUserControl : UserControl
{
#region ImageSource
public static readonly DependencyProperty ImageSourceProperty =
DependencyProperty.Register
(
"ImageSource",
typeof(Uri),
typeof(MyUserControl),
new FrameworkPropertyMetadata(new PropertyChangedCallback(OnImageSourceChanged))
);
public Uri ImageSource
{
get { return (Uri)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
#endregion ImageSource
#region Text
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register
(
"Text",
typeof(string),
typeof(MyUserControl),
new FrameworkPropertyMetadata("")
);
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
#endregion Text
public MyUserControl()
{
InitializeComponent();
}
private static void OnImageSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
var myUserControl = sender as MyUserControl;
if (myUserControl != null)
{
myUserControl.ImageSource.Source = new BitmapImage((Uri) e.NewValue);
}
}
}
Whenever the Image Source changes, this will automatically update the source of the inner Image control. Note, we need to do some conversion here since the Image control itself uses an ImageSource type.
XAML can then be updated to:
<UserControl x:Name="ControlName">
<Button x:Name = "OkButton" Content="OK"/>
<DockPanel >
<Image x:Name = "MyImage" />
<TextBlock x:Name = "DialogTextBox" Text="{Binding ElementName=ControlName, Path=Text}"/>
</DockPanel>
</UserControl>
Here, the inner TextBlock control simply binds to the Text DependencyProperty of the parent (the main UserControl).
In your code behind, add 2 DependencyProperties and bind them to your Image Source and to your TextBlock Text.
Here is a tutorial on how to use and create Dependency Properties :
http://www.wpftutorial.net/dependencyproperties.html
For your binding in your xaml, here is an example :
<Image Source="{Binding YourProperty, RelativeSource={RelativeSource FindAncestor, AncestorType=YourUserControl}}/>
I need to display a image on mouse over only in silverlight 5.
Can any one please help me.
Give me any idea how to achieve it...
<sdk:DataGridTemplateColumn x:Name="colDeleteContent" IsReadOnly="True" Header="Delete Content" Width="100" CanUserResize="False">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel x:Name="spDeleteContent" VerticalAlignment="Center" Margin="10,0,0,0" Width="20" Height="20" HorizontalAlignment="Center" Orientation="Vertical">
<Image x:Name="imgDeleteContent" Source="Assets/Images/close.png" Height="15" Width="15" Margin="0" MouseLeftButtonDown="imgDeleteContent_MouseLeftButtonDown" Cursor="Hand"/>
</StackPanel>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
Neon
There are many ways, OnFocus set your images Visibility Visible and on FocusLeft set Collapsed basically of your main element.
But I see that it is on DataTemplate on your sample.
So There are some ways I imagine.
1)Create a new component instead of element in DataTemplate such as
namespace ProjectBus
{
public class StackPanelHasHiddenImage : Control
{
//You may don't need dependency property
//It supports bindability
#region dependency property
public static Image GetMyProperty(DependencyObject obj)
{
return (Image)obj.GetValue(ImageProperty);
}
public static void SetMyProperty(DependencyObject obj, Image value)
{
obj.SetValue(ImageProperty, value);
}
// Using a DependencyProperty as the backing store for MyProperty. This enables animation, styling, binding, etc...
public static readonly DependencyProperty ImageProperty =
DependencyProperty.RegisterAttached("Image", typeof(Image), typeof(StackPanelHasHiddenImage), new System.Windows.PropertyMetadata(null));
#endregion
public Image Image
{
get;
set;
}
protected override void OnGotFocus(RoutedEventArgs e)
{
Image.Visibility = Visibility.Visible;
base.OnGotFocus(e);
}
protected override void OnLostFocus(RoutedEventArgs e)
{
Image.Visibility = Visibility.Collapsed;
base.OnLostFocus(e);
}
}
}
Then in your xaml use like
<DataTemplate>
<local:StackPanelHasHiddenImage Image="/ProjectBus;component/blabal.png"/>
</DataTemplate>
2) Use GotoStateAction behaviour
http://msdn.microsoft.com/en-us/library/ff723953%28v=expression.40%29.aspx but I see that its in a DataTemplate and using this may not be easier.
3) MainElement.FinChildByType < StackPanel >().FirstOrDefault() is not null then add your focus and unfocus handler to this element on your codebehind. But this is a method I mostly avoid to use.
Its a bit harder because its in a template so your named object in template can't be seen on your codebehind.
Hope helps
I have two controls on WPF
<Button HorizontalAlignment="Center"
Name="btnChange"
Click="btnChange_Click"
Content="Click Me" />
<Label Name="lblCompanyId"
HorizontalAlignment="Center"
DataContext="{Binding ElementName=_this}"
Content="{Binding Path=CompanyName}" />
As we can see that label is bound to local property(in code Behind), I don't see any value on label when I click button...
Below is my code behind...
public static readonly DependencyProperty CompanyNameProperty =
DependencyProperty.Register("CompanyName", typeof(string), typeof(Window3), new UIPropertyMetadata(string.Empty));
public string CompanyName {
get { return (string)this.GetValue(CompanyNameProperty); }
set { this.SetValue(CompanyNameProperty, value); }
}
private void btnChange_Click(object sender, RoutedEventArgs e) {
this.CompanyName = "This is new company from code beind";
}
Try:
Content="{Binding ElementName=_this, Path=CompanyName}"
Without the DataContext binding.
EDIT
I have no problems with your code, have named your window to x:Name="_this"?
<Window x:Class="WpfStackOverflowSpielWiese.Window3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window3"
Height="300"
Width="300"
x:Name="_this">
<Grid>
<StackPanel>
<Button HorizontalAlignment="Center"
Name="btnChange"
Click="btnChange_Click"
Content="Click Me" />
<Label Name="lblCompanyId"
HorizontalAlignment="Center"
DataContext="{Binding ElementName=_this}"
Content="{Binding Path=CompanyName}"></Label>
</StackPanel>
</Grid>
</Window>
Is your window really Window3?
public partial class Window3 : Window
{
public Window3() {
this.InitializeComponent();
}
public static readonly DependencyProperty CompanyNameProperty =
DependencyProperty.Register("CompanyName", typeof(string), typeof(Window3), new UIPropertyMetadata(string.Empty));
public string CompanyName {
get { return (string)this.GetValue(CompanyNameProperty); }
set { this.SetValue(CompanyNameProperty, value); }
}
private void btnChange_Click(object sender, RoutedEventArgs e) {
this.CompanyName = "This is new company from code behind";
}
}
You are currently binding your Label's DataContext to a Button, and then trying to set it's Content to CompanyName, however CompanyName is not a valid property on Button
Specify DataContext in your binding Path to bind to Button.DataContext.CompanyName instead of Button.CompanyName
Also, I'd recommend just binding the Content instead of binding both the DataContext and Content
<Label Content="{Binding ElementName=btnChange, Path=DataContext.CompanyName}" />
And if your code looks exactly like the code sample posted, then both the Button and Label have the same DataContext, so you can bind directly to CompanyName
<Label Content="{Binding CompanyName}" />
Edit
Just noticed that your Label's binding was to a control named _this. I had assumed it was the Button, although I see now that your Button's name is btnChange, not _this.
It doesn't matter though, the answer is still the same. You're trying to bind to a UI Control's CompanyName property, which is not a valid property.