Here is a working example of my issue: https://github.com/themimcompany/AttachedPropertyIssue
I have a Style for a Button that defines a ControlTemplate. Inside the ControlTemplate I have a TextBlock that has the same attached property. I want to set/bind the TextBlock's attached property to the value of the Button's attached property. The attached property is a simple int value.
How do I get this working? Is this possible to do in UWP? I get errors that don't give me indication on how to fix this. Like Unspecified error...
Here is my Style:
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<TextBlock local:Translation.TranslationModelID="{Binding Path=(local:Translation.TranslationModelID),
RelativeSource={RelativeSource TemplatedParent}}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Here is my attached property definition:
public class Translation
{
public static int GetTranslationModelID(DependencyObject obj)
{
return (int)obj.GetValue(TranslationModelIDProperty);
}
public static void SetTranslationModelID(DependencyObject obj, int value)
{
obj.SetValue(TranslationModelIDProperty, value);
}
public static readonly DependencyProperty TranslationModelIDProperty =
DependencyProperty.RegisterAttached("TranslationModelID", typeof(int), typeof(FrameworkElement), new PropertyMetadata(0));
}
Here is the button I'm trying to define, notice I want to assign the attached property of the button- then take the value in the ControlTemplate and assign it to the TextBlock's attached property (look at the style):
<Button local:Translation.TranslationModelID="1" />
Explaining once more: I have an attached property assigned to a Button and I would like to assign the value of that Button's attached property to the same attached property of a TextBlockin the ControlTemplate of that Button's Style. It's not working as I expect. I get Unspecified error.. exception at run time. How do I get this working?
Here is a working example of my issue: https://github.com/themimcompany/AttachedPropertyIssue
EDIT:
This approach is giving me a different error. The property 'TranslationModelID' was not found in type 'PassingAttachedPropertyInControlTemplater.Translation'. [Line: 17 Position: 40]
<Page.Resources>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<TextBlock local:Translation.TranslationModelID="{TemplateBinding local:Translation.TranslationModelID}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<Button x:Name="btn" local:Translation.TranslationModelID="1" />
</Grid>
I want to assign an attached property of the templated parent to an attached property of an element inside a ControlTemplate using TemplateBinding or regular Binding
For your requirement, you could create Templated Control that inherit button. Then set TextBlock Attached property in the code behind. Please check the follow segment code.
public sealed class CustomButton : Button, IDisposable
{
private long token;
private TextBlock Tbk;
public CustomButton()
{
this.DefaultStyleKey = typeof(CustomButton);
}
private void CallBackMethod(DependencyObject sender, DependencyProperty dp)
{
UpdateAttachedPropertyValue();
}
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
token = this.RegisterPropertyChangedCallback(AttachedPropertyTest.Translation.TranslationModelIDProperty, CallBackMethod);
Tbk = GetTemplateChild("TBK") as TextBlock;
UpdateAttachedPropertyValue();
}
public void Dispose()
{
this.UnregisterPropertyChangedCallback(AttachedPropertyTest.Translation.TranslationModelIDProperty,token);
}
private void UpdateAttachedPropertyValue()
{
AttachedPropertyTest.Translation.SetTranslationModelID(Tbk, AttachedPropertyTest.Translation.GetTranslationModelID(this));
}
}
Xaml
<Style TargetType="local:CustomButton" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:CustomButton">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<TextBlock x:Name="TBK"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I'm trying to create a menu that works with radio buttons. The buttons are graphically prettied by a template. here I would like to display an icon and a text. However, I don't know how I can pass several parameters, so far I only pass the text and have not yet found a way to pass the image.
<StackPanel Grid.Row="1" Margin="0,10,0,0">
<RadioButton Content="Dashboard"
IsChecked="True"
Style="{StaticResource MenuButtonTheme}"/>
<RadioButton Content="Product"
Style="{StaticResource MenuButtonTheme}"/>
<RadioButton Content="Inventory"
Style="{StaticResource MenuButtonTheme}"/>
</StackPanel>
Style Of the Radiobutton
<Style BasedOn="{StaticResource {x:Type ToggleButton}}"
TargetType="{x:Type RadioButton}"
x:Key="MenuButtonTheme">
<Style.Setters>
<Setter Property="Foreground" Value="#FFFFFF"/>
<Setter Property="FontFamily" Value="/Fonts/#Poppins"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Border Background="{TemplateBinding Background}"
CornerRadius="5"
Margin="5,0,5,0">
<Grid VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Height="50"
>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<iconPacks:PackIconBoxIcons Kind="SolidPieChartAlt2"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Margin="10,0,0,0"/>
<TextBlock Grid.Column="1" Text="{TemplateBinding Property=Content}"
VerticalAlignment="Center"
FontSize="20"
FontWeight="Regular"
Margin="10,0,0,0"/>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Background" Value="#212121"/>
<Setter Property="Foreground" Value="#4169E1"/>
</Trigger>
</Style.Triggers>
</Style>
Foreach particular part of UI in your application, I recommend you to make it a module, that is, a UserContol or ContentControl(recommened). These controls corresponds to View in MVVM, and foreach of them you should add a View Model.
namespace MyNameSpace{
public class View<T> : ContentControl {
public T ViewModel {
get { return (T)GetValue(ViewModelProperty); }
set { SetValue(ViewModelProperty, value); }
}
public static readonly DependencyProperty ViewModelProperty =
DependencyProperty.Register("ViewModel", typeof(T), typeof(View<T>), new PropertyMetadata());
}
public abstract class ViewModel : INotifyPropertyChanged {
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged([CallerMemberName] String propertyName = null) {
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}
If the relative logic is purely UI, then Model is not needed in this case.
Your View's xaml should look like this:
<local:View x:TypeArguments="MyAViewModel" x:Name="view"
x:Class="MyNameSpace.MyAView"
skip
xmlns:local="clr-namespace:MyNameSpace">
<Image Source="{Binding ViewModel.ImageSource,ElementName=view}"/>
</local:View>
Your ViewModel should look like this:
public class MyAViewModel: ViewModel {
public AbilityViewModel() {//Constructor with parameter
//Set the image source here
}
private ImageSource imageSource;
public ImageSource ImageSource{
get => imageSource
set{
imageSource = value;
NotifyPropertyChanged();
}
}
}
In the root element of your UI hierarchy, for example your MainWindow, add your custom contols:
<Window x:Name="window" skip>
<Grid>
<local:MyAView ViewModel="{Binding MyAViewModel,ElementName=window}"/>
<local:MyBView ViewModel="{Binding MyBViewModel,ElementName=window}"/>
</Grid>
</Window>
You may either do so with adding dependency properies of the MyAViewModel and MyBViewModel to your MainWindow, or just set MyAView's ViewModel in MainWindow's constructor or loaded event. You may create the ViewModel to pass to view, in which ImageSource is initialized in constructor, or change it after its construction by somewhere in your code.
Above codes are just demo, directly written in stackoverflow's webpage and is not tested. You may ask me if there is any problem.
I want to bind a property (myHeight) in my Controltemplate to the parent. The following is my code so far.
Resource dict
<Style TargetType="local2:TestingControl" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local2:TestingControl">
<Border
Height="{TemplateBinding myHeight}"
Background="Green"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<StackPanel>
<ContentPresenter Content="{TemplateBinding Content}"/>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TestingControl.cs
[ContentProperty(Name = "Content")]
public sealed class TestingControl : Control
{
public TestingControl()
{
this.DefaultStyleKey = typeof(TestingControl);
}
public static readonly double myHeight = (double)100;
public object Content
{
get { return (string)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
public static readonly DependencyProperty ContentProperty =
DependencyProperty.Register("Content", typeof(string), typeof(TestingControl), new PropertyMetadata(string.Empty));
}
What i'm trying to bind is the myHeight. I'd like to have this in the .cs since I need to run some operations on it. This fails to load entirely!
I also tried the following approach
Resource dict
<x:Double x:Key="myHeight">100</x:Double>
<Style TargetType="local2:TestingControl" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local2:TestingControl">
<Border
Height="{ThemeResource myHeight}"
Background="Green"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
TestingControl.cs
[ContentProperty(Name = "Content")]
public sealed class TestingControl : Control
{
public TestingControl()
{
this.DefaultStyleKey = typeof(TestingControl);
var x = (double)Resources["myHeight"];
}
public object Content
{
get { return (string)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
public static readonly DependencyProperty ContentProperty =
DependencyProperty.Register("Content", typeof(string), typeof(TestingControl), new PropertyMetadata(string.Empty));
}
The problem with the second approach, is that when reading the property in the .cs code, var x = (double)Resources["myHeight"]; I get an exception.
Resolutions to either (preferably both, since I'm just trying to learn UWP) would be greatly appreciated.
The first thing is TemplateBinding should bind the dependency property and you write the static filed that can not bind to Height.
The second thing is ThemeResource will find the Theme but you define a static source.
<x:Double x:Key="myHeight">100</x:Double>
<Style TargetType="local2:TestingControl" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local2:TestingControl">
<Border
Height="{StaticResource myHeight}"
Background="Green"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The third thing is you get the resource at first but the resource inits after OnApplyTemplate.
You should move the code that gets the resource to OnApplyTemplate.
protected override void OnApplyTemplate()
{
try
{
// find something in TestingControl.Resources
var x = Resources["myHeight"];
}
catch (Exception e)
{
}
try
{
// find something in App.Resources
var x = App.Current.Resources["myHeight"];
}
catch (Exception e)
{
}
base.OnApplyTemplate();
}
If your resource is written in App.xaml that you should use App.Current.Resources to get the resource.
If you want to get the resource in your customs control that you should add the resource in your control.
<local:TestingControl>
<local:TestingControl.Resources>
<x:Double x:Key="myHeight">100</x:Double>
</local:TestingControl.Resources>
</local:TestingControl>
I have a custom control based on a button, and I put an image inside. I can set the source of the image in the xaml, but if I try and bind it, it doesn't work.
Generic.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CustomControl">
<Style TargetType="{x:Type local:MyCustomControl}" BasedOn = "{StaticResource {x:Type Button}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyCustomControl}">
<Grid x:Name="InnerGrid">
<Image Source="pathname"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
This works just fine, however if I replace the <Image Source="pathname"/> with <Image Source={Binding MyImage, RelativeSource={RelativeSource Self}}"/>, and reference a Delegate Property in the class, it breaks.
MyCustomControl.cs
public class MyCustomControl : Button
{
static DependencyProperty m_myimage = null;
private DependencyProperty MyImageProperty
{
get
{
return m_myimage;
}
}
public BitmapImage MyImage
{
get
{
return (BitmapImage)GetValue(MyImageProperty);
}
set
{
SetValue(MyImageProperty, value);
}
}
protected override void OnInitialized(EventArgs e)
{
base.OnInitialized(e);
MyImage = new BitmapImage(new Uri(pathname));
}
private static void RegisterDependencyProperties()
{
if (m_myimage == null)
{
m_myimage = DependencyProperty.Register("MyImage",
typeof(BitmapImage), typeof(MyCustomControl), null);
}
}
static MyCustomControl()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(MyCustomControl),
new FrameworkPropertyMetadata(typeof(MyCustomControl)));
RegisterDependencyProperties();
}
}
How can I get it to work?
Figured it out myself after about 2 hours. The xaml binding should look like,
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyCustomControl}">
<Grid x:Name="InnerGrid">
<Image Source="{Binding MyImage, RelativeSource={RelativeSource TemplatedParent}}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Note that the binding relative resource went from RelativeSource={RelativeSource Self} to RelativeSource={RelativeSource TemplatedParent}
I have a control that contains another control. InnerControl contains some property like ButtonVisibility. The simplified InnerControl code sample is below
public class InnerControl : ControlBase
{
//...
public Visibility ButtonVisibility
{
get { return (Visibility)GetValue(ButtonVisibility); }
set { SetValue(ButtonVisibility, value); }
}
public static readonly DependencyProperty ButtonVisibility =
DependencyProperty.Register(
"ButtonVisibility",
typeof (Visibility),
typeof (InnerControl),
new PropertyMetadata(Visibility.Collapsed));
}
This is the code of MainControl which contains InnerControl as a Dependency Property
public class MainControl : ControlBase
{
//...
public InnerControl MyInner
{
get { return (InnerControl) GetValue(MyInnerProperty); }
set { SetValue(MyInnerProperty, value); }
}
public static readonly DependencyProperty MyInnerProperty =
DependencyProperty.Register(
"MyInner",
typeof (InnerControl),
typeof (MainControl),
new PropertyMetadata(null, OnMyInnerPropertyChanged));
private static void OnMyInnerPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
//...
}
}
I have two different templates for this controls in the Generic.xaml
<Style TargetType="local:InnerControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:InnerControl">
<Grid x:Name="ContainerGrid">
<!-- some markup -->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="local:MainControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MainControl">
<Grid x:Name="RootGrid">
<Button x:Name="MyButton" Visibility="{TemplateBinding ???}"/>
<ContentControl x:Name="MyInnerControl" Content="{TemplateBinding MyInner}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is the way how could I use this controls
<controls:MainControl>
<controls:MainControl.MyInner>
<controls:InnerControl ButtonVisibility="Visible">
<!-- some markup -->
</controls:InnerControl>
</controls:MainControl.MyInner>
<!-- some markup -->
</controls:MainControl>
I need to change the state of my MainControl after button's click. That's why it is located in MainControl template.
So, could any body gives me an advise how to bind ButtonVisibility from the MyInner to the MyButton on MainControl?
You need to bind directly to the "ButtonVisibility" property of InnerControl, like this:
<Button x:Name="MyButton"
Visibility="{Binding MyInner.ButtonVisibility,
RelativeSource={RelativeSource TemplatedParent}}"/>
Like #james mentioned, you will have to use RelativeSource to bind to either TemplatedParent or to any Type in the visual tree by specifying type like:
<Button x:Name="MyButton" Content="MyButton"
Visibility="{Binding Path=MyInner.ButtonVisibility,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type controls:MainControl}}}"/>
WPF AttachedProperty helps to change the state of your main control from your inner control.
I'm writing my first custom user control against WinRT, and I've run into a problem.
I would like to expose an image, PART_NwBadge and it's visibility as Dependency Properties in my control. Then I would like to supply default values through setters in the style. This part is not working. Instead, the default value from the DependencyProperty (in BadgedButton.cs) is being applied.
Is it even possible to do what I've described? Or should I be setting the default values in the C# code? If I do need to set the values in the C# code, would someone comment on how to load image resources in code? After a great deal of searching I've yet to find a solution that works.
Finally, since this is my first serious attempt at writing a custom control, please suggest any improvements I could make, even if they are not directly related to the problem.
Windows 8 Consumer Preview
C#/WinRT/Metro
Visual Studio 11 Beta
Themes/Generic.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:l="using:InkSdkTestApplication.Controls">
<Style TargetType="l:BadgedButton">
<Setter Property="Width" Value="36"/>
<Setter Property="Height" Value="36"/>
<Setter Property="Background" Value="#1C1C1C"/>
<Setter Property="BorderBrush" Value="White"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="NwBadge">
<Setter.Value>
<Image Width="16" Height="16" Source="../Assets/mouse_16x16.png"/>
</Setter.Value>
</Setter>
<Setter Property="NwBadgeVisibility" Value="Collapsed"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="l:BadgedButton">
<Border x:Name="PART_Border"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<ContentPresenter x:Name="PART_Content"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}"/>
<Image x:Name="PART_NwBadge"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Width="16" Height="16"
Visibility="{TemplateBinding NwBadgeVisibility}"
Source="{TemplateBinding NwBadge}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Controls/BadgedButton.cs
namespace InkSdkTestApplication.Controls
{
public sealed class BadgedButton : Control
{
#region // Dependency Properties
public static DependencyProperty ContentProperty =
DependencyProperty.Register(
"Content",
typeof(FrameworkElement),
typeof(BadgedButton),
new PropertyMetadata(null));
public static DependencyProperty NwBadgeProperty =
DependencyProperty.Register(
"NwBadge",
typeof(Image),
typeof(BadgedButton),
new PropertyMetadata(null));
public static DependencyProperty NwBadgeVisibilityProperty =
DependencyProperty.Register(
"NwBadgeVisibility",
typeof(Visibility),
typeof(BadgedButton),
new PropertyMetadata(Visibility.Visible));
#endregion
#region // Public Properties
public FrameworkElement Content
{
get { return (FrameworkElement)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
public Image NwBadge
{
get { return (Image)GetValue(NwBadgeProperty); }
set { SetValue(NwBadgeProperty, value); }
}
public Visibility NwBadgeVisibility
{
get { return (Visibility)GetValue(NwBadgeVisibilityProperty); }
set { SetValue(NwBadgeVisibilityProperty, value); }
}
#endregion
public BadgedButton()
{
this.DefaultStyleKey = typeof(BadgedButton);
}
}
}
http://timheuer.com/blog/archive/2012/03/07/creating-custom-controls-for-metro-style-apps.aspx