Binding different properties to different sources - wpf

I have a Window with a ListBox which has a DataTemplate, bound to an ObservableCollection of LogItems. The ItemsSource of the ListBox is set in code to the collection; the bindings on the TextBox and TextBlock which make up the DataTemplate are set in XAML. So far, so conventional. However, I need to set the font size/family for the TextBlock at runtime. Currently this information is held in a static cGlobals class. So I need to be able to bind the TextBlock.Text to the LogItems collection, but the TextBlock.FontSize property to the cGlobals.LogFontSize property. How can I do this, either via binding as sketched out in the XAML below, or in code?
<ListBox . . . . >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" . . . . >
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*" MinHeight="40" />
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Background="Honeydew" Text="{Binding Mode=OneWay, Path=Header, . . . . />
<TextBlock FontSize="{Binding ??????}" Grid.Row="1" Text="{Binding Path=BodyText}" />
</Grid>
</DataTemplate >
</ListBox.ItemTemplate >
</ListBox>

xaml
<Window x:Class="WpfApplication6.StaticBinding"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication6"
Title="StaticBinding" Height="300" Width="300">
<Grid>
<TextBlock FontSize="{Binding Source={x:Static local:Global.FontSize}}" Text="abc"/>
</Grid>
Global
public class Global
{
public static double FontSize
{
get { return 20.0; }
}
}

You will need to declare a public property of Type cGlobals but the class cannot be static because you will need to use it as a return type. It does not look like you are following the Model-View-ViewModel pattern, since you are assigning the ItemsSource in the code-behind instead of XAML, so you will need to declare the property in the code-behind. In your Code-Behind(your .xaml.cs file)
private CGlobals _cGlobals;
public CGlobals CGlobals{get{return _cGlobals;}}
public CodeBehindConstructor(){
_cGlobals = new CGlobal{FontSize = 12, FontFamily="Times New Roman"};
}
xaml:
<Window Name="TheWindow">
<TextBlock FontSize="{Binding CGlobals.FontSize, ElementName=TheWindow}" Grid.Row="1" Text="{Binding Path=BodyText}" />
</Window>

Related

Why is ItemsControl in the following WPF XAML not showing anything?

When I run the app, I expect to see 5 buttons (see ItemsControl\DataTemplate\Button in my XAML below) each with a content like "55/42" denoting max ad min temperature. However, the window is blank. I know this has to do with ItemsControl because I can display the data without using the ItemsControl. Can someone catch my mistake?
<Window x:Class="Embed_WeatherSummaryAsItemsControl_ToMain.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FocusManager.FocusedElement="{Binding ElementName=InputCity}"
Title="Weather App" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBox x:Name="InputCity" Grid.Row="0" Width="200" Text="{Binding CityAndOptionalCountry}"></TextBox>
<Button Grid.Row="0" Width="50" Content="Go" Margin="260,0,0,0" Command="{Binding GetWeatherReportCommand}"></Button>
<ItemsControl Grid.Row="1" ItemsSource="{Binding WeatherForecastSummaryCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding Path=MaxMinTemperature}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
As shown below, "WeatherForecastSummaryCollection" is a collection property on ViewModel class and "MaxMinTemperature" is a property of item in collection.
public class MainWindowViewModel : ViewModelBase
{
....
private List<WeatherForecastSummary> mWeatherForecastSummaryCollection;
public List<WeatherForecastSummary> WeatherForecastSummaryCollection
{
get { return mWeatherForecastSummaryCollection; }
set
{
mWeatherForecastSummaryCollection = value;
OnPropertyChanged("WeatherForecastSummaryCollection");
}
}
.....
}
public class WeatherForecastSummary
{
public string MaxMinTemperature { get; set; }
}
Thanks for helping!
I think you are missing the DataContext here.
Even if you are using the codebehind of the View, you need to write
this.DataContext = this;
or if you are using someother class as viewmodel you might want to point the datacontext to that class. Just replace "this" in the above code with your viewmodels object.
In this case it would be ,
this.DataContext = new MainWindowViewModel();

How do i create a usercontrol that i can place stuff into?

I'm trying to make a custom ScrollViewer uc and it occurred to me that I wouldn't know how to put things within the tags of it. For an example
<CustomScrollViewer>
<This is the place where i want to put things>
</CustomScrollViewer>
Is it possible to define an area where the "inside" things will be put?
You may doing this like as: create a dependency property for UserControl of IEnumerable type, and bind the ItemsSource, that you want scrolling.
MainWindow
<Window x:Class="ScrollViewerUserControl.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:this="clr-namespace:ScrollViewerUserControl"
WindowStartupLocation="CenterScreen"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<x:Array x:Key="ParametersArray" Type="{x:Type sys:String}">
<sys:String>0</sys:String>
<sys:String>1</sys:String>
<sys:String>2</sys:String>
<sys:String>3</sys:String>
</x:Array>
</Window.Resources>
<Grid>
<this:CustomScrollViewer Width="100"
Height="30"
ItemsSource="{StaticResource ParametersArray}" />
</Grid>
</Window>
CustomScrollViewer.xaml
<Grid>
<ScrollViewer Background="Aquamarine"
Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}">
<ItemsControl ItemsSource="{Binding Path=ItemsSource, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
</ScrollViewer>
</Grid>
CustomScrollViewer.xaml.cs
public partial class CustomScrollViewer : UserControl
{
public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register("ItemsSource", typeof(IEnumerable), typeof(CustomScrollViewer));
public IEnumerable ItemsSource
{
get
{
return this.GetValue(ItemsSourceProperty) as string;
}
set
{
this.SetValue(ItemsSourceProperty, value);
}
}
public CustomScrollViewer()
{
InitializeComponent();
}
}
But I think, in this case it's better create a CustomScrollViewer like this:
public class CustomScrollViewer : ScrollViewer
{
// Your additional logic here
}
And in XAML use like this:
<this:CustomScrollViewer Width="100" Height="20">
<ItemsControl ItemsSource="{StaticResource ParametersArray}" />
</this:CustomScrollViewer>
What do you mean 'put things into'?
In your example of a custom ScrollViewer, it would work exactly how you'd use a normal ScrollViewer, for example:
<ScrollViewer>
<DataGrid /> // or whatever controls you want to place within the scrollviewer
</ScrollViewer>
becomes
<CustomScrollViewer>
<DataGrid /> // or whatever controls you want to place within the scrollviewer
</CustomScrollViewer>
For this kind of layout control, it wraps other controls ... so just extend the ScrollViewer to add whatever changes you want to it.
If you mean having new properties on that CustomScrollViewer then follow Anatoliy's guidelines on creating new dependecy properties, which would allow you to do things like ...
<CustomScrollViewer myCustomProperty="WickeyWickeyWhack">
<DataGrid /> // or whatever controls you want to place within the scrollviewer
</CustomScrollViewer>

It is possible to do 'simple' binding with a UserControl?

I have a user control in which I have some textblocks. I want to include this usercontrol into a listBox (or listview in case it causes any problems).
When I check the output windows, I see no binding exception, but I don't see anything in the textblock either.
Is there anyway to make this work ?
Thanks :
Here is the listBox I use for now :
<ListBox AllowDrop="True" Grid.Row="1"
Style="{StaticResource BaseListBox}" x:Name="LstEquipeDefaut">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<my:ucEquipe x:Name="ucEquipe" Grid.Row="1" Margin="5,0,5,2"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Here is the Usercontrol :
<UserControl x:Class="ucEquipe"
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:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
d:DesignHeight="350" d:DesignWidth="180" MinWidth="180" >
<Border Style="{StaticResource UControlBorder}">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition Height="25" />
<RowDefinition Height="35" />
<RowDefinition Height="100" />
<RowDefinition Height="35" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<TextBox AllowDrop="True" x:Name="TxtChiefEquipe"
Style="{StaticResource BaseTextBox}"
Text="{Binding Mode=OneWay,Path=chefEquipe.NomComplet}"
Grid.Row="1" />
</Grid>
</Border>
Here is the objets I use :
Public Class Equipe
Public Property ID As Long = 0
Public Property Couleur As String = ""
Public Property Semaine As New Date(1900, 1, 1)
Public Property chefEquipe As Employe = Nothing
Public Property ListEquipeEmploye As New List(Of EquipeEmploye)
Public Property ListEquipeEquipement As New List(Of EquipeEquipement)
End Class
The objet Employe have a property called NomComplet. For now I manually added new objects in the listbox for testing.
Your Equipe class needs to implement INotifyPropertyChanged
private Employe _chefEquipe;
public Employe ChefEquipe
{
get { retun _chefEquipe; }
set
{
_chefEquipe = value;
NotifyPropertyChanged("ChefEquipe");
}
}
Sorry about the C#, I don't remember the VB syntax anymore =)

Bidning with TextBlock is not Working

I have my Model as:
namespace Forecast.MVVM.WPF.ViewModel
{
public class ApplicationInfoViewModel
{
private string versionNumber;
public ApplicationInfoViewModel()
{
versionNumber = Assembly.GetExecutingAssembly().GetName().Version.ToString();
}
public string VersionNumber
{
get { return versionNumber; }
set { versionNumber = value; }
}
}
And my view I am setting the datContext and getting the values as ;
<UserControl .... xmlns:AppInfo="clr-namespace:Forecast.MVVM.WPF.ViewModel" .../>
<UserControl.Resources>
<AppInfo:ApplicationInfoViewModel x:Key="forecastVersionInfo"/>
</UserControl.Resources>
<Grid>
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding VersionNumber}" VerticalAlignment="Bottom"/>
</Grid>
But I am unable to see the values
1st way :
Try tro replace <UserControl.Resources> by <UserControl.DataContext>
... and delete "x:Key="forecastVersionInfo"".
2nd way :
Or set DataContext="{StaticResource forecastVersionInfo}" on your textBlock.
3rd way :
According to this MSDN page, set the Source property on your textblock binding :
Text="{Binding VersionNumber, Source={StaticResource forecastVersionInfo}}"
You are not setting DataContext
<UserControl.DataContext>
<AppInfo:ApplicationInfoViewModel />
</UserControl.DataContext>
If you want to refer to resource, you can set it on Grid or move resource to App.Resources and apply DataContext as attribute on UserControl
<Grid DataContext="{Binding Path={StaticResource forecastVersionInfo}}">
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding VersionNumber}" VerticalAlignment="Bottom"/>
</Grid>

Binding Silverlight UserControl custom properties to its' elements

I'm trying to make a simple crossword puzzle game in Silverlight 2.0. I'm working on a UserControl-ish component that represents a square in the puzzle. I'm having trouble with binding up my UserControl's properties with its' elements. I've finally (sort of) got it working (may be helpful to some - it took me a few long hours), but wanted to make it more 'elegant'.
I've imagined it should have a compartment for the content and a label (in the upper right corner) that optionally contains its' number. The content control probably be a TextBox, while label control could be a TextBlock. So I created a UserControl with this basic structure (the values are hardcoded at this stage):
<UserControl x:Class="XWord.Square"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FontSize="30"
Width="100" Height="100">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="Label" Grid.Row="0" Grid.Column="1"
Text="7"/>
<TextBox x:Name="Content" Grid.Row="1" Grid.Column="0"
Text="A"
BorderThickness="0" />
</Grid>
</UserControl>
I've also created DependencyProperties in the Square class like this:
public static readonly DependencyProperty LabelTextProperty;
public static readonly DependencyProperty ContentCharacterProperty;
// ...(static constructor with property registration, .NET properties
// omitted for brevity)...
Now I'd like to figure out how to bind the Label and Content element to the two properties. I do it like this (in the code-behind file):
Label.SetBinding( TextBlock.TextProperty, new Binding { Source = this, Path = new PropertyPath( "LabelText" ), Mode = BindingMode.OneWay } );
Content.SetBinding( TextBox.TextProperty, new Binding { Source = this, Path = new PropertyPath( "ContentCharacter" ), Mode = BindingMode.TwoWay } );
That would be more elegant done in XAML. Does anyone know how that's done?
First, set the DataContext on the UserControl using {RelativeSource Self}:
<UserControl x:Class="XWord.Square"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FontSize="30"
Width="100" Height="100"
DataContext="{Binding RelativeSource={RelativeSource Self}}">
Now you can bind the individual elements to the properties of the usercontrol:
<TextBlock x:Name="Label" Grid.Row="0" Grid.Column="1"
Text="{Binding LabelText}"/>
<TextBox x:Name="Content" Grid.Row="1" Grid.Column="0"
Text="{Binding ContentCharacter}" BorderThickness="0" />
For SL 2.0, you'll need to set the DataContext on the UserControl's Loaded event handler.
private void UserControl_Loaded( object sender, RoutedEventArgs e ) {
LayoutRoot.DataContext = this;
}
As Silverlight cannot use FindAncestor technique you can use a trick similar to the one that sets the UserControl's name, but without breaking its functionality by using the name of the LayoutRoot...
<UserControl x:Class="XWord.Square"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
FontSize="30"
Width="100" Height="100">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="{Binding Path=Parent.LabelText, ElementName=LayoutRoot}" Grid.Row="0" Grid.Column="1"
Text="7"/>
<TextBox x:Name="{Binding Path=Parent.ContentCharacter, ElementName=LayoutRoot}" Grid.Row="1" Grid.Column="0"
Text="A"
BorderThickness="0" />
</Grid>
</UserControl>
It worked in SL3 without having to add any additional code (I'm using it in a WP7 app), but don't know if you can use it in SL2. Well, I realize now how this question is old, hope it's still helpful, I've arrived here because the answers I got for the same problem in WP7 didn't convince me.
I think you are looking for UI Element to Element Binding which is a feature of Silverlight 3.
I may not be understanding your issue exactly. In Silverlight, you are able to bind to almost any data object. So, if you have a PuzzleSquare class that contains properties Content and Label, you may bind to these properties directly from the object.
Let's say you created a simple object PuzzleSquare:
public class PuzzleSquare
{
public string Content{ get; set; }
public string Label{ get; set; }
public void PuzzleSquare(){};
public void PuzzleSquare(string label, string content):this()
{
Content = content;
Label = label;
}
}
So, if you are building the app with the classic view/code behind model, your code behind would add this object to the DataContext property of the grid on page load:
LayoutRoot.DataContext = new PuzzleSquare("1", "A");
Your Xaml would bind to the Square property:
<TextBlock x:Name="Label" Grid.Row="0" Grid.Column="1"
Text="{Binding Label}"/>
<TextBox x:Name="Content" Grid.Row="1" Grid.Column="0"
Text="{Binding Content}" BorderThickness="0" />
Does that make sense?
ib.
This worked in Silverlight 4.0
Put a name on the UserControl, and then refer to it in the TextBlock
<UserControl x:Class="XWord.Square"
...omitted for brevity ...
x:Name="Square">
<TextBlock x:Name="Label" ...
Text="{Binding Path=LabelText,ElementName=Square}"/>
Try this:
Public ReadOnly TextProperty As DependencyProperty = DependencyProperty.Register("Text", GetType(String), GetType(ButtonEdit), New System.Windows.PropertyMetadata("", AddressOf TextPropertyChanged))
Public Property Text As String
Get
Return GetValue(TextProperty)
End Get
Set(ByVal value As String)
SetValue(TextProperty, value)
End Set
End Property
Private Sub TextPropertyChanged()
If String.IsNullOrEmpty(Text) Then
TextBox1.Text = ""
Else
TextBox1.Text = Text
End If
End Sub
Private Sub TextBox1_LostFocus(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles TextBox1.LostFocus
Text = TextBox1.Text
End Sub
I can bind in both XAML and code behind.

Resources