Why won't this work?
In generic.xaml for a custom control:
In the style applied to the custom control...
<Setter Property="ChromeContent">
<Setter.Value>
<Grid />
</Setter.Value>
</Setter>
...
Later, in the control template...
<ContentPresenter Grid.Column="0"
x:Name="ChromeContentPresenter"
Content="{TemplateBinding ChromeContent}" />
Here's the dependency property for ChromeContent...
public Object ChromeContent
{
get { return (Object)GetValue(ChromeContentProperty); }
set { SetValue(ChromeContentProperty, value); }
}
public static readonly DependencyProperty ChromeContentProperty =
DependencyProperty.Register("ChromeContent", typeof(Object),
typeof(casPopup), null);
As you can see, it takes any object. I tried changing it to a Grid, but that did not help.
It throws this error (from javascript): _Failed to assign to property 'System.Windows.Controls.ContentPresenter.Content'
Oddly, the following will work fine if I remove the Grid from the setter nd just use text:
<Setter Property="ChromeContent" Value="DEFAULT" />
Also, this will work too from the OnApplyTemplate method in the control class:
Grid g = new Grid();
g.Width = 100;
g.Height = 25;
g.Background = new SolidColorBrush(Colors.LightGray);
ChromeContent = g;
I'm having a hard time understanding what is preventing the default content of a grid, defined in the generic.xaml from working. Does anyone have any knowledge on this matter?
Many thanks in advance for your help!
This is the problem:-
<Setter Property="ChromeContent">
<Setter.Value>
<Grid />
</Setter.Value>
</Setter>
You should not include a UIElement directly in a resource dictionary or as a value of a style. You might see the style as being some kind of descriptor but it isn't. The values in a style are constructed instances of the objects they hold. Your style holds a single instance of Grid. Whenever that style is used to assign to a ChromeContent property it will attempt to assing the same single instance of the Grid.
A UIElement can only be a child of one parent. What would happen if two instances your control were constructed? There would (if silverlight let you) be an attempt to assign the same single instance of the Grid to both controls.
This is one reason for templates such as ControlTemplate and DataTemplate. The markup inside these is invoked each time the template is used rather than when the Xaml is first parsed.
Edit:
To answer you supplementary question, you should default another property of type DataTemplate:-
<Setter Property="ChromeContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid />
</DataTemplate>
</Setter.Value>
</Setter>
Property:-
public Object ChromeContentTemplate
{
get { return (DataTemplate)GetValue(ChromeContentTemplateProperty); }
set { SetValue(ChromeContentTemplateProperty, value); }
}
public static readonly DependencyProperty ChromeContentTemplateProperty=
DependencyProperty.Register("ChromeContentTemplate", typeof(DataTemplate),
typeof(casPopup), null);
Control Template:-
<ContentPresenter Grid.Column="0"
x:Name="ChromeContentPresenter"
Content="{TemplateBinding ChromeContent}"
ContentTemplate="{TemplateBinding ChromeContentTemplate" />
Related
I am trying to change my labels style dynamically on my forms.
The behaviour I want is: Every time a textbox called 'txtName', for instance, gets Focused, it should search for a Label Control named 'lblName' and change its FontWeight property to "Bold".
The same for a textbox called 'txtBirthday' and a label called 'lblBirthday', where 'txt' stands for TextBox and lbl for Label.
Every textbox has a NAME and a prefix "txt" and a prefix "lbl" for its corresponding label, but if the textbox doesnt find a correspoding label it should do nothing.
In other words, every time a Textbox get focused on the form, it should search for the label "responsable" for its description and hightlight it (changing its font weight to bold) so the form will be more user frendly. That way the user wont get confused which textbox he is typing in.
I have a peace of code that maybe a good start point, but I dont know how to work with non-static control names.
<Style TargetType="{x:Type Label}">
<Style.Triggers>
<!-- Here is how we bind to another control's property -->
<DataTrigger Binding="{Binding IsFocused, ElementName=txtUser}" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<!-- Here is the 'override' content -->
</DataTrigger>
</Style.Triggers>
</Style>
As mentioned in the comments above, the technique of searching for and pattern matching element names as the basis for applying visual behaviour is not robust. For example, what happens when you make a typo and use "lbel" instead of "lbl"? Or what happens if you later decide to replace all Labels with TextBlocks - do you still annotate their names with a prefix of "lbl" to preserve the behaviour? Another downside to using code to change visuals - is now understanding the behaviour of your UI from reading XAML alone becomes much harder since properties are being changed behind the scenes. WPF has many built in ways which should be preferred over this approach. If you are interested in alternative implementations, just ask we are here to help :)
That being said, if must use this approach, here is what your attached behaviour would look like:
C#
public static class FontWeightFocusedHelper
{
private static readonly List<Label> Labels = new List<Label>();
public static void SetChangeFontWeightOnTextBoxFocused(Label label, bool value)
{
label.SetValue(ChangeFontWeightOnTextBoxFocusedProperty, value);
}
public static bool GetChangeFontWeightOnTextBoxFocused(Label label)
{
return (bool) label.GetValue(ChangeFontWeightOnTextBoxFocusedProperty);
}
public static readonly DependencyProperty ChangeFontWeightOnTextBoxFocusedProperty =
DependencyProperty.RegisterAttached("ChangeFontWeightOnTextBoxFocused", typeof (bool),
typeof (FontWeightFocusedHelper),
new FrameworkPropertyMetadata(OnChangeFontWeightOnTextBoxFocusedPropertyChanged));
private static void OnChangeFontWeightOnTextBoxFocusedPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is TextBox)
{
var textBox = (TextBox) d;
// Make sure to use a WeakEventManager here otherwise you will leak ...
textBox.GotFocus += OnTextBoxGotFocusChanged;
textBox.LostFocus += OnTextBoxLostFocusChanged;
return;
}
if (d is Label)
{
// Make sure to store WeakReferences here otherwise you will leak ...
Labels.Add((Label)d);
return;
}
throw new InvalidOperationException("ChangeFontWeightOnTextBoxFocused can only be set on TextBox and Label types.");
}
private static void OnTextBoxLostFocusChanged(object sender, RoutedEventArgs e)
{
SetMatchingLabelFontWeight(sender as TextBox, FontWeights.Regular);
}
private static void OnTextBoxGotFocusChanged(object sender, RoutedEventArgs e)
{
SetMatchingLabelFontWeight(sender as TextBox, FontWeights.Bold);
}
private static void SetMatchingLabelFontWeight(TextBox textBox, FontWeight fontWeight)
{
if (textBox != null)
{
// Suggest adding a property for LabelPrefix and TextBoxPrefix too, use them here
var label = Labels.Where(l => !String.IsNullOrEmpty(l.Name))
.Where(l => l.Name.Replace("lbl", "txt") == textBox.Name)
.FirstOrDefault();
if (label != null)
{
label.FontWeight = fontWeight;
}
}
}
}
XAML
<StackPanel >
<StackPanel.Resources>
<Style TargetType="{x:Type TextBox}">
<Setter Property="l:FontWeightFocusedHelper.ChangeFontWeightOnTextBoxFocused" Value="True" />
</Style>
<Style TargetType="{x:Type Label}">
<Setter Property="l:FontWeightFocusedHelper.ChangeFontWeightOnTextBoxFocused" Value="True" />
</Style>
</StackPanel.Resources>
<StackPanel Orientation="Horizontal">
<Label x:Name="lblOne" VerticalAlignment="Center" Content="First Name"/>
<TextBox x:Name="txtOne" Width="300" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Label x:Name="lblTwo" VerticalAlignment="Center" Content="Last Name" />
<TextBox x:Name="txtTwo" Width="300" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
Hope this helps!
You can have all gotfocus go to the same event. The sender is passed to the event so you can get the name of the sender. In code behind you can use variable and logic that is not available in XAML.
Situation:
I have a "wrapper panel" UserControl like this (namespaces and visual details removed for brevity):
<UserControl ...>
<Grid x:Name="LayoutRoot" Background="White">
<ContentPresenter x:Name="integratedPanelContent" Margin="5" />
</Grid>
</UserControl>
Then in the Code-behind I have registered a dependency property
public FrameworkElement PanelContent
{
get { return (FrameworkElement)GetValue(PanelContentProperty); }
set { SetValue(PanelContentProperty, value); }
}
public static readonly DependencyProperty PanelContentProperty =
DependencyProperty.Register("PanelContent", typeof(FrameworkElement), typeof(MyWrapperPanel),
new PropertyMetadata(null, OnPanelContentChanged));
private static void OnPanelContentChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
((MyWrapperPanel)d).OnSetContentChanged(e);
}
protected virtual void OnSetContentChanged(DependencyPropertyChangedEventArgs e)
{
if (PanelContent != null)
integratedPanelContent.Content = PanelContent;
}
Now I can wrap any content into my control:
<my:MyWrapperPanel x:Name="myWrap">
<my:MyWrapperPanel.PanelContent>
<TextBlock x:Name="tbxNothing" Text="Nothing" />
</my:MyWrapperPanel.PanelContent>
</my:MyWrapperPanel>
Description of the problem:
Whenever I try to use the reference tbxNothing in codebehind, the system throws NullReferenceException because tbxNothing, although as a reference exists, does not point to the TextBlock defined in XAML, but is null.
Possible (but inconvenient) workaround:
There is a workaround where I remove x:Name from the TextBlock, and then I explicitely define private TextBlock called tbxNothing. Then in the OnNavigatedTo event handler I assign the value the following way:
tbxNothing = myWrap.PanelContent as TextBlock;
This works but is not a right way to do it, because if a content is a stackpanel that contains wanted controls, I'd have to traverse the tree to find what I need, which is extremely inconvenient.
Question:
Why is the textblock no longer visible when wrapped in a User control (the way described), and how to get it by its x:Name in code-behind?
The problem is your panel content is falling between two stools. On the one hand the content with the name "tbxNothing" is create in the namescope of the main page. However its not added to the object tree at that point. On the other hand the MyWrapperPanel being a UserControl has its own namescope and its into the object tree below this that the item with then name "tbxNothing" is added. FindName on the main page won't find anything inside the MyWrapperPanel because it has its own namescope and FindName on the MyWrapperPanel won't find "tbxNothing" because it doesn't exist in its namescope (being actually created in the main page).
The answer is don't use a UserControl as a basis for MyWrapperPanel. Instead create a Silverlight Template Control. Modify the base class it inherits from to ContentControl and tweak its default template to include a ContentPresenter. Should look something like this:-
public class MyWrapperPanel : ContentControl
{
public MyWrapperPanel ()
{
this.DefaultStyleKey = typeof(MyWrapperPanel );
}
}
then in themes/generic.xaml the style can look like this:-
<Style TargetType="local:MyWrapperPanel">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyWrapperPanel">
<Grid>
<ContentPresenter />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Your main page xaml would look like:-
<my:MyWrapperPanel x:Name="myWrap">
<TextBlock x:Name="tbxNothing" Text="Nothing" />
</my:MyWrapperPanel>
Note that deriving from ContentControl gives you a Content property which the ContentPresenter auto-magically wires to.
I'm looking to set a UserControl to be the Content of another UserControl in XAML, in the same way you can set a Button's Content to be anything.
Let's say my "outer" UserControl looks like this:
<MyUserControl>
<Grid>
<Border FancyPantsStyling="True">
<-- I want to insert other controls here -->
</Border>
</Grid>
</MyUserControl>
And I'd like to instantiate this way:
<local:MyUserControl>
<local:MyUserControl.Content>
<local:AnotherControl />
</local:MyUserControl.Content>
</local:MyUserControl>
How do I design MyUserControl to render it's Content in a specific location?
All the stuff you put into your UserControl's XAML is its Content so you can't inject something else by setting the Content property. There are a few different ways you could handle this. If you don't have anything in the code-behind for MyUserControl you can just get rid of it and use something like:
<ContentControl>
<ContentControl.Template>
<ControlTemplate TargetType="{x:Type ContentControl}">
<Grid>
<Border FancyPantsStyling="True">
<ContentPresenter/>
</Border>
</Grid>
</ControlTemplate>
</ContentControl.Template>
<local:AnotherControl/>
</ContentControl>
If you have code behind that doesn't access the XAML elements directly you can do a similar thing with your existing control (since UC derives from ContentControl):
<local:MyUserControl>
<local:MyUserControl.Template>
<ControlTemplate TargetType="{x:Type local:MyUserControl}">
<Grid>
<Border FancyPantsStyling="True">
<ContentPresenter/>
</Border>
</Grid>
</ControlTemplate>
</local:MyUserControl.Template>
</local:MyUserControl>
If you need to keep the existing content connected to your code-behind you can use a DataTemplate to pass in the external content (into a new DP on MyUserControl) and apply that template to a ContentControl in the UC's XAML.
I got an idea, then tried it and it worked for me. I just wanted to share this to other people. I hope it will be useful.
The video link which explains what is the end of the solution: Video Link
The basic idea is to create UIElement DependencyProperty instead of creating Border DependencyProperty
Firstly, you should add your borders or panels or whatever you want to your user control (in your case it'S "MyUserControl") and make sure it has a name to access from .cs file:
<Border x:Name="LeftBorder" Grid.Column="0">
Then you should add a public UIElement value to your user control (in your case it's "MyUserControl"):
public UIElement LeftBorderChild
{
get { return (UIElement)GetValue(LeftBorderChildProperty ); }
set { SetValue(LeftBorderChildProperty , value); }
}
Secondly, type of your Dependencyproperty must be UIElement:
public static readonly DependencyProperty LeftBorderChildProperty = DependencyProperty.Register("LeftBorderChild", typeof(UIElement), typeof(MyUserControl), new PropertyMetadata(new PropertyChangedCallback(LeftBorderChildChanged)));
After these, typing events:
public static void LeftBorderChildChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
MyUserControl thisUserControl = d as MyUserControl;
thisCombobox._LeftBorderChildChanged(e); // Calling local event. The new child will be added in this local event function.
}
public void _LeftBorderChildChanged(DependencyPropertyChangedEventArgs e)
{
// In this function, new child element will be added to inside of LeftBorder
this.LeftBorder.Child = (UIElement)e.NewValue; // Sets left border child
}
We're done with this class. Let's call it from other class and add a control inside of it.
<local:MyUserControl Width="312" HorizontalAlignment="Right"
Margin="48, 0, 0, 0" VerticalAlignment="Center"
Height="56" >
<local:MyUserControl.LeftBorder>
<-- You can insert another control here -->
<-- Just don't remember that if you want to add more than one controls, you should add a panel then add controls into inside of the panel because Border child can only 1 child item -->
<StackPanel>
<-- Now you can insert your controls -->
</StackPanel>
</local:MyUserControl.LeftBorder>
</local:MyUserControl>
Note: When you do this firstly, you have to run your program before viewing in xaml designer. After running your program, all design systems are going to run synchronously.
I hope i understood what you mean and answered correctly.
Thank You
unless i misunderstood the question, you can use in your control and set its content to whatever you need.
I have a ListBox, and I need to set its ControlTemplate to a Virtualizing WrapPanel which is a class that extends VirtualizingPanel, using a style that looks like this:
<Style TargetType="{x:Type ListBox}" x:Key="PhotoListBoxStyle">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}" >
<s:VirtualizingVerticalWrapPanel>
</s:VirtualizingVerticalWrapPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now, in the private method of Virtualizing WrapPanel below I try to access this.ItemContainerGenerator, but I get null value, any idea what's the problem ??
private void RealizeFirstItem()
{
IItemContainerGenerator generator = this.ItemContainerGenerator;
GeneratorPosition pos = generator.GeneratorPositionFromIndex(0);
using (generator.StartAt(pos, GeneratorDirection.Forward))
{
UIElement element = generator.GenerateNext() as UIElement;
generator.PrepareItemContainer(element);
this.AddInternalChild(element);
}
}
I think I had a similar problem and this helped:
var necessaryChidrenTouch = this.Children;
IItemContainerGenerator generator = this.ItemContainerGenerator;
... for some reason you have to "touch" the children collection in order for the ItemContainerGenerator to initialize properly.
For Windows 8.1 Metro apps, the ItemContainerGenerator was depricated and will return null. New Apis:
ItemsControl.ItemContainerGenerator.ItemFromContainer = ItemsControl.ItemFromContainer
ItemsControl.ItemContainerGenerator.ContainerFromItem = ItemsControl.ContainerFromItem
ItemsControl.ItemContainerGenerator.IndexFromContainer = ItemsControl.IndexFromContainer
ItemsControl.ItemContainerGenerator.ContainerFromIndex = ItemsControl.ContainerFromIndex
http://msdn.microsoft.com/en-us/library/windows/apps/dn376326.aspx
Falck is mostly correct. Actually, you need to reference the 'InternalChildren' of the virtualized stack panel. The decompiled code for this property is:
protected internal UIElementCollection InternalChildren
{
get
{
this.VerifyBoundState();
if (this.IsItemsHost)
{
this.EnsureGenerator();
}
else if (this._uiElementCollection == null)
{
this.EnsureEmptyChildren(this);
}
return this._uiElementCollection;
}
}
The 'EnsureGenerator' does the work of making sure that a generator is available. Very poor 'just in time' design, IMO.
Most probably this is a virtualization-related issue so ListBoxItem containers get generated only for currently visible items (e.g. https://msdn.microsoft.com/en-us/library/system.windows.controls.virtualizingstackpanel(v=vs.110).aspx#Anchor_9)
I'd suggest switching to ListView instead of ListBox - it inherits from ListBoxand it supports ScrollIntoView() method which you can utilize to control virtualization;
targetListView.ScrollIntoView(itemVM);
DoEvents();
ListViewItem itemContainer = targetListView.ItemContainerGenerator.ContainerFromItem(itemVM) as ListViewItem;
(the example above also utilizes the DoEvents() static method explained in more detail here; WPF how to wait for binding update to occur before processing more code?)
There are a few other minor differences between the ListBox and ListView controls (What is The difference between ListBox and ListView) - which should not essentially affect your use case.
This is because you changed the Template of the Listbox, while u should have just changed the ItemsPanel:
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<s:VirtualizingVerticalWrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
There are multiple places in my WPF application where I need a button that looks & feels like a regular button, but:
It shows a specific icon on it (defined as {StaticResource EditIcon})
It applies a style (defined as {StaticResource GrayOutButtonStyle})
I would prefer to define these attributes in a single location, rather than repeating them each place the button is used. What is the appropriate way to do this in XAML?
--
If it helps, below is what I'm currently doing, but I was told this is wrong:
Updated: Is this the wrong way? Is there a way to fix this so that it is the "right way"?
I define the button as a template with the key EditButton:
<ControlTemplate x:Key="EditButton" TargetType="{x:Type Button}">
<Button Style="{StaticResource GrayOutButtonStyle}"
Command="{TemplateBinding Command}">
<Image x:Name="editImage" Source="{StaticResource EditIcon}" />
</Button>
</ControlTemplate>
Then, I declare a button with the template EditButton each place I want to use it in the application. I also indicate the Command to invoke here:
<Button Template="{StaticResource EditButton}" Command="..." />
Is this not right? What would be the correct way to do this?
A different approach:
Have you considered making a custom control? This way, you can create your own attributes to set the image contained in the button, and don't have to rely on multiple styles.
<myControl:MyButton x:Name="oneButton" ImageSource="MyButton.png" />
<myControl:MyButton x:Name="anotherButton" ImageSource="MyOtherButton.png" />
class MyButton {
private string imageSource;
public string ImageSource {
get {
return this.imageSource;
}
set {
this.imageSource = value;
//set the image control's source to this.imageSource
}
}
}
You can create a Style which targets all the Button of your app. Do do that, simply create a Style without giving it a Key:
<Style TargetType={x:Type Button}>
</Style>
Then in the Style, you can add a setter which sets the Template property:
<Setter Property="Template">
<Setter.Value>
<!-- whatever you want -->
</Setter.Value>
</Setter>