I am working on creating a tag cloud in Silverlight 2 and trying to bind data from a List collection to a Scale transform on a TextBlock. When running this I get an AG_E_PARSER_BAD_PROPERTY_VALUE error. Is it possible to data bind values to transforms in Silverlight 2? If not could I do something to the effect of FontSize={Binding Weight*18} to multiply the tag's weight by a base font size? I know this won't work, but what is the best way to calculate property values for items in a DataTemplate?
<DataTemplate>
<TextBlock HorizontalAlignment="Stretch" VerticalAlignment="Stretch" TextWrapping="Wrap" d:IsStaticText="False" Text="{Binding Path=Text}" Foreground="#FF1151A8" FontSize="18" UseLayoutRounding="False" Margin="4,4,4,4" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="{Binding Path=WeightPlusOne}" ScaleY="{Binding Path=WeightPlusOne}"/>
</TransformGroup>
</TextBlock.RenderTransform>
The issue seems to be Rule #1 from this post:
The target of data binding must be a FrameworkElement.
So since ScaleTransform isn't a FrameworkElement it doesn't support binding. I tried to bind to a SolidColorBrush to test this out and got the same error as with the ScaleTransform.
So in order to get around this you can create a control that exposes a dependency property of your tag data type. Then have a property changed event that binds the properties of your tag data to the properties in the control (one of which would be the scale transform). Here is the code I used to test this out.
items control:
<ItemsControl x:Name="items">
<ItemsControl.ItemTemplate>
<DataTemplate>
<local:TagControl TagData="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
tag control xaml:
<UserControl x:Class="SilverlightTesting.TagControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<TextBlock x:Name="text" TextWrapping="Wrap" FontSize="18" Margin="4,4,4,4">
<TextBlock.RenderTransform>
<ScaleTransform x:Name="scaleTx" />
</TextBlock.RenderTransform>
</TextBlock>
</UserControl>
tag control code:
public partial class TagControl : UserControl
{
public TagControl()
{
InitializeComponent();
}
public Tag TagData
{
get { return (Tag)GetValue(TagDataProperty); }
set { SetValue(TagDataProperty, value); }
}
// Using a DependencyProperty as the backing store for TagData. This enables animation, styling, binding, etc...
public static readonly DependencyProperty TagDataProperty =
DependencyProperty.Register("TagData", typeof(Tag), typeof(TagControl), new PropertyMetadata(new PropertyChangedCallback(TagControl.OnTagDataPropertyChanged)));
public static void OnTagDataPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
{
var tc = obj as TagControl;
if (tc != null) tc.UpdateTagData();
}
public void UpdateTagData()
{
text.Text = TagData.Title;
scaleTx.ScaleX = scaleTx.ScaleY = TagData.Weight;
this.InvalidateMeasure();
}
}
Seems like overkill for just setting a single property, but I couldn't find an easier way.
Related
First time really using WPF - thought I'd have a go at remaking something I did a while back in Java.
I'm trying to bind the Text value of a TextBlock on a popup to something that gets set in the backend, so I can use one handler method to display any message on said popup.
I've been trying multiple different routes, such as fully binding it in the cs instead of XAML like so:
<--XAML-->
<Popup Margin="89,75,0,0" Name="verif_popup" HorizontalAlignment="Left" VerticalAlignment="Top" IsOpen="False" PopupAnimation="Slide" Placement="Center" Width="100" Height="100" Grid.Column="1">
<Popup.Effect>
<BlurEffect/>
</Popup.Effect>
<Canvas Background="Azure">
<TextBlock Name="VerifTextBlock"/>
</Canvas>
</Popup>
<--CS-->
private void SmallPopupHandler(string text)
{
Binding binding = new("Text")
{
Source = text
};
VerifTextBlock.SetBinding(TextBlock.TextProperty, binding);
verif_popup.IsOpen = true;
}
But it doesn't like the fact that the string isn't a TextBlock property, I sort of knew this wouldn't work but it seems the most logical to me having come from swing. There also doesn't seem to be a way for me to cast it to it and im not in the mood for making my own dependency property rn...
The next thing I tried was to bind the value to a field in the class, but I just got a stackoverflow error (haha nice)
<--XAML-->
<Popup Margin="89,75,0,0" Name="verif_popup" HorizontalAlignment="Left" VerticalAlignment="Top" IsOpen="False" PopupAnimation="Slide" Placement="Center" Width="100" Height="100" Grid.Column="1">
<Popup.Effect>
<BlurEffect/>
</Popup.Effect>
<Canvas Background="Azure">
<Canvas.DataContext>
<local:MainWindow/>
</Canvas.DataContext>
<TextBlock Name="VerifTextBlock" Text="{Binding Popup_message}"/>
</Canvas>
</Popup>
<--CS-->
public partial class MainWindow : Window
{
public string? Popup_message { get; set; }
public MainWindow()
{
InitializeComponent();
this.DataContext = this;
}
I also tried making an interfacing class of sorts to see if that would work around the stackoverflow error (haha) but as im sure you could have guessed by now, that didn't work either...
Kinda pulling my hair out so any help would be greatly appreciated!
Thanks in advance!
You could just set the Text property of the VerifTextBlock directly as suggested by #Clemens:
private void SmallPopupHandler(string text)
{
VerifTextBlock.Text = text;
verif_popup.IsOpen = true;
}
If you really do want to use a binding for whatever reason, then remove the binding path. This should work:
private void SmallPopupHandler(string text)
{
Binding binding = new()
{
Source = text
};
VerifTextBlock.SetBinding(TextBlock.TextProperty, binding);
verif_popup.IsOpen = true;
}
I have a large ListView which is largely made InkCanvas objects, it turns out that ListView implements data virtualisation to "cleverly" unload and load items in the view depending on the visible items in the view. The problem with this is that many times the ListView caches items and when a new item is added it essentially copy items already added in the view. So in my case, if the user adds a stroke to an Inkcanvas and then adds a new InkCanvas to the ListView, the new canvas contains the strokes from the previous canvas. As reported here this is because of the data virtualisation. My ListView is implemented as follows:
<Grid HorizontalAlignment="Stretch">
<ListView x:Name="CanvasListView" IsTapEnabled="False"
IsItemClickEnabled="False"
ScrollViewer.ZoomMode="Enabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Enabled"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Visible"
HorizontalAlignment="Stretch">
<!-- Make sure that items are not clickable and centered-->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel>
<local:CanvasControl Margin="0 2"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
MinWidth="1000" MinHeight="100" MaxHeight="400"
Background="LightGreen"/>
<Grid HorizontalAlignment="Stretch" Background="Black" Height="2"></Grid>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<InkToolbar x:Name="inkToolbar"
VerticalAlignment="Top"
Background="LightCoral"/>
<StackPanel HorizontalAlignment="Right">
<Button x:Name="AddButton" Content="Add Page" Click="Button_Click"/>
<TextBlock x:Name="PageCountText" />
</StackPanel>
</StackPanel>
</Grid>
A full example can be found here and here is a video of the issue.
Indeed if I turn off data virtualisation (or switch to an ItemsControl) everything works brilliantly. The problem however is that with a very large list, this approach has a heavy impact on performance (with 60+ InkCanvas controls the app just crashes). So is there a way to retain data virtualisation while avoiding the duplication of items? I have tried with VirtualizationMode.Standard but items are still duplicated.
To solve this problem, we must first understand why this problem occurs.
ListView has a reuse container inside, it will not endlessly create new list items, but will recycle.
In most cases, such recycling is not a problem. But it's special for InkCanvas.
InkCanvas is a stateful control. When you draw on InkCanvas, the handwriting is retained and displayed on the UI.
If your control is a TextBlock, this problem does not occur, because we can directly bind the value to TextBlock.Text, but for the Stroke of InkCanvas, we cannot directly bind, which will cause the so-called residue.
So in order to avoid this, we need to clear the state, that is, every time the InkCanvas is created or reloaded, the strokes in the InkCanvas are re-rendered.
1. Create a list for saving stroke information in ViewModel
public class ViewModel : INotifyPropertyChanged
{
// ... other code
public List<InkStroke> Strokes { get; set; }
public ViewModel()
{
Strokes = new List<InkStroke>();
}
}
2. Change the internal structure of CanvasControl
xaml
<Grid>
<InkCanvas x:Name="inkCanvas"
Margin="0 2"
MinWidth="1000"
MinHeight="300"
HorizontalAlignment="Stretch" >
</InkCanvas>
</Grid>
xaml.cs
public sealed partial class CanvasControl : UserControl
{
public CanvasControl()
{
this.InitializeComponent();
// Set supported inking device types.
inkCanvas.InkPresenter.InputDeviceTypes =
Windows.UI.Core.CoreInputDeviceTypes.Mouse |
Windows.UI.Core.CoreInputDeviceTypes.Pen;
}
private void StrokesCollected(InkPresenter sender, InkStrokesCollectedEventArgs args)
{
if (Data != null)
{
var strokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes().ToList();
Data.Strokes = strokes.Select(p => p.Clone()).ToList();
}
}
public ViewModel Data
{
get { return (ViewModel)GetValue(DataProperty); }
set { SetValue(DataProperty, value); }
}
public static readonly DependencyProperty DataProperty =
DependencyProperty.Register("Data", typeof(ViewModel), typeof(CanvasControl), new PropertyMetadata(null,new PropertyChangedCallback(Data_Changed)));
private static void Data_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if(e.NewValue!=null && e.NewValue is ViewModel vm)
{
var strokes = vm.Strokes.Select(p=>p.Clone());
var instance = d as CanvasControl;
instance.inkCanvas.InkPresenter.StrokesCollected -= instance.StrokesCollected;
instance.inkCanvas.InkPresenter.StrokeContainer.Clear();
try
{
instance.inkCanvas.InkPresenter.StrokeContainer.AddStrokes(strokes);
}
catch (Exception)
{
}
instance.inkCanvas.InkPresenter.StrokesCollected += instance.StrokesCollected;
}
}
}
In this way, we can keep our entries stable.
I'm trying to figure out how to change a control's template to something that will make it held inside a Grid, like this:
<ControlTemplate x:Key="containedTemplate">
<Grid>
<!-- place templated control here -->
</Grid>
</ControlTemplate>
I of course want any of the inner control's properties to be synced automatically with the templated control.
Can this be done at all?
Here's an hypothetical example for a TextBox template:
<ControlTemplate x:Key="textTemplate" TargetType="{x:Type TextBox}">
<Grid Background="Red">
<TextBox Name="InnerTextBox" Margin="5,5,5,5"/>
</Grid>
</ControlTemplate>
Now if I did apply the template on a TextBox instance like this:
<TextBox Text="{Binding MyTextProperty}" Template="{StaticResource textTemplate}"/>
... then the control would magically be a Grid, containing a TextBox with a few margins and whose Text's property would be bound to MyTextProperty of whatever DataContext instance has been set:
<!-- runtime visual tree I'd like to be produced by the above XAML -->
<Grid Background="Red">
<TextBox Text="{Binding MyTextProperty}" Margin="5,5,5,5"/>
</Grid>
If I had the following code:
<StackPanel>
<TextBox Text="{Binding MyTextProperty}" Template="{StaticResource textTemplate}"/>
<TextBox Text="{Binding MyOtherTextProperty}" Template="{StaticResource textTemplate}"/>
<TextBox Text="{Binding YetAnotherTextProperty}" Template="{StaticResource textTemplate}"/>
</StackPanel>
The resulting tree would be this:
<!-- runtime visual tree I'd like to be produced by the above XAML -->
<StackPanel>
<Grid Background="Red">
<TextBox Text="{Binding MyTextProperty}" Margin="5,5,5,5"/>
</Grid>
<Grid Background="Red">
<TextBox Text="{Binding MyOtherTextProperty}" Margin="5,5,5,5"/>
</Grid>
<Grid Background="Red">
<TextBox Text="{Binding YetAnotherTextProperty}" Margin="5,5,5,5"/>
</Grid>
</StackPanel>
In these examples you can see that the TextBox's Text property is correctly propagated down to the "inner" TextBox instance. The control's default visual tree is also preserved (borders, typing area, etc.).
I'm aware of template parts but as I said I'm trying to find a global approach here, and I DO NOT want to change the control's appearance; only put it inside a container.
frankly, this question exhausted me, i have this only answer but not convince me a lot.
first you should create multi ControlTemplates for each control that you want to set your template then create this class
public class ControlTemplateConverter
{
public static readonly DependencyProperty IsEnabledProperty =
DependencyProperty.RegisterAttached("IsEnabled", typeof(bool), typeof(ControlTemplateConverter), new UIPropertyMetadata(false, IsEnabledChanged));
private static void IsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
ControlTemplate t;
if (d == null) return;
if (d is TextBlock)
t = App.Current.FindResource("TextBoxTemplate") as ControlTemplate;
else if (d is CheckBox)
t = App.Current.FindResource("CheckBoxTemplate") as ControlTemplate;
// and So On
(d as Control).Template = t;
}
public static bool GetIsEnabled(DependencyObject obj)
{
return (bool)obj.GetValue(IsEnabledProperty);
}
public static void SetIsEnabled(DependencyObject obj, bool value)
{
obj.SetValue(IsEnabledProperty, value);
}
}
and your control should like this:
<TextBox local:ControlTemplateConverter.IsEnabled="True"></TextBox>
<CheckBox local:ControlTemplateConverter.IsEnabled="True"></CheckBox>
I am working on a Windows Store app in which I have a user control as a data template inside flipview.
User Control: (ImagePage.xaml)
<UserControl
x:Name="userControl"
x:Class="MWC_online.Classes.ImagePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MWC_online.Classes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768"
d:DesignWidth="1366">
<Grid Background="#FFF0F0F0" Margin="4,0">
...
<Image Source="{Binding Img}" Stretch="None" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel x:Name="stackPanel" HorizontalAlignment="Left" Margin="984,83,0,0" Width="325">
<Grid Background="{Binding Colour}">
<TextBlock Margin="30,30,30,15" Text="{Binding TextContent1}" FontWeight="Light" TextWrapping="Wrap" Foreground="#FF00ABE8" FontSize="29" />
</Grid>
<Grid Background="{Binding Colour}">
<TextBlock Margin="30,10,30,30" Text="{Binding TextContent2}" TextWrapping="Wrap" Foreground="#FF606060" FontSize="17" />
</Grid>
</StackPanel>
</Grid>
</UserControl>
User Control Class: (ImagePage.xaml.cs)
private static void OnTitleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){
StackPanel stackPanel = (StackPanel)d;
stackPanel.Visibility = Visibility.Collapsed;
}
public string TextContent1
{
get { return (string)GetValue(TextContent1Property); }
set { SetValue(TextContent1Property, value); }
}
public static readonly DependencyProperty TextContent1Property =
DependencyProperty.Register("TextContent1", typeof(string), typeof(ImagePage), new PropertyMetadata("", new PropertyChangedCallback(OnTextContent1Changed)));
private static void OnTextContent1Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
// what I want to do is if TextContent1 or TextContent2 has no value
// turn the stackpanel visibility to collapsed
StackPanel stackPanel = (StackPanel)d;
stackPanel.Visibility = Visibility.Collapsed;
}
Everything is working fine EXCEPT the OnTextContent1Changed is not firing! so I dont know if this is the right way of doing things but basically I just want to switch an UI element within the user control ON or OFF depending on the data binding that is being fed into it.
The TextBlock doesn't have a DataContext to find the DependencyProperty on. If you give your Grid a name in ImagePage.xaml:
<Grid Background="#FFF0F0F0" Margin="4,0" x:Name="MyGrid">
Then you can set its DataContext in the ImagePage constructor in ImagePage.xaml.cs:
public ImagePage()
{
InitializeComponent();
MyGrid.DataContext = this;
}
Which tells the Grid (and its decendents) to look for Dependency Properties on the ImagePage class. With this, the Dependency Property should get bound correctly. Another problem, though, is that you're telling the DependencyProperty that it is on an ImagePage with typeof(ImagePage), but then casting it to a StackPanel, which will fail every time:
StackPanel stackPanel = (StackPanel)d; // Throws System.InvalidCastException
You could fix this by giving a name to the StackPanel and referencing it directly in your .cs file.
I have an instance of a user control in my project that contains a slider. I would like to bind the ScaleTransform of a RichTextBox control to the value of the slider but I do not know how to properly reference it. The user control is called toolbar and the slider inside it is called Scale this is what I have tried so far:
<RichTextBox x:Name="body"
SelectionChanged="body_SelectionChanged"
SpellCheck.IsEnabled="True"
AcceptsReturn="True" AcceptsTab="True"
BorderThickness="0 2 0 0">
<RichTextBox.LayoutTransform>
<ScaleTransform ScaleX="{Binding ElementName=toolbar.Scale, Path=Value}" ScaleY="{Binding ElementName=toolbar.Scale, Path=Value}"/>
</RichTextBox.LayoutTransform>
</RichTextBox>
I have also tried doing it in the .cs file since I'm having trouble with the binding but haven't had any luck figuring out how to actually set the transform values once my slider event has been fired.
You cannot reference names inside other controls, they are in another name-scope. If you need the slider value bind it to a property of the UserControl.
UserControl code (whatever that class may be called in your case):
<!-- ToolBar.xaml -->
<UserControl ...
Name="control">
<!-- ... -->
<Slider Value="{Binding ScaleValue, ElementName=control}" ... />
<!-- ... -->
</UserControl>
// ToolBar.xaml.cs
public partial class ToolBar : UserControl
{
public static readonly DependencyProperty ScaleValueProperty =
DependencyProperty.Register("ScaleValue", typeof(double), typeof(ToolBar));
public double ScaleValue
{
{ get { return (double)GetValue(ScaleValueProperty); }
{ set { SetValue(ScaleValueProperty, value); }
}
}
New binding code:
<ScaleTransform ScaleX="{Binding ElementName=toolbar, Path=ScaleValue}" ... />