Binding Data!!
Been some time before I looked up my blog. I was working on some data binding and would like to show some of it. Here I will be showing how we can bind data. I will not be pasting the complete code as it will just eat up a lot of estate. However, not to worry, I will be showing the main parts ..:)
I tried creating a game player setting screen which looks pretty neat.
Lets begin with the code. I created an avalon Web Browser app again using the available templates. The main screen is designed in the Page1.xaml file and the GamePlayerSettingWindow is designed in the Window1.xaml file which is added to the project.
Page1.xaml
<?Mapping XmlNamespace="CodeMapNS" ClrNamespace="PlayerSettings" ?>
//this specifies the naespace used by the data class<Canvas x:Class="PlayerSettings.GameSettingBinding"xmlns="https://schemas.microsoft.com/winfx/avalon/2005xmlns:x="https://schemas.microsoft.com/winfx/xaml/2005xmlns:c="CodeMapNS" Name="Page1"Background="VerticalGradient Beige wheat" ><Canvas.Resources><c:PlayerDetails x:Key="playerSettingDataSource"/><Style x:Key="{x:Type Button}" TargetType="{x:Type Button}"> //Style for the button<Setter Property="Foreground" Value="yellow"/><Setter Property="FontWeight" Value="Bold"/><Setter Property="FontSize" Value="15"/><Setter Property="Template"> //Template for the button<Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border x:Name="ButtonBorder" BorderBrush="VerticalGradient #eee #aaa"CornerRadius="25" Background="VerticalGradient #f00 #00f">
//The corner radius makes the buttopn look circular :) <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"></ContentPresenter></Border><ControlTemplate.Triggers> //Triggers for the button - animates on mouse over <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="ButtonBorder" Property="BorderBrush"Value="VerticalGradient #aaa #eee"/><Setter TargetName="ButtonBorder" Property="Background"Value="VerticalGradient #00f #f00"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="Style1"></Style></Canvas.Resources><Canvas.DataContext> //Necessary to have a data context for databinding to take place<Binding Source="{StaticResource playerSettingDataSource}"/></Canvas.DataContext><Grid>--- //This includes the buttons , textblocks and textboxes shown in the figure. </Grid>
-----------------------------------------------------------------------------------
In the Page1.xaml.cs file we have the following code:
namespace PlayerSettings{public partial class GameSettingBinding{// Sample event handler: private void ArmourStrengthDecreaseButton(object sender, RoutedEventArgs e){ //Create a Binding expression which binds the text property of <br>Textbox whose name is tbArmourStrength to the dataBindingExpression theBindingExpression = BindingOperations.GetBindingExpression(tbArmourStrength,
TextBox.TextProperty);PlayerSettings.PlayerDetails srcData = (PlayerSettings.PlayerDetails)theBindingExpression.DataItem;
//gets the associated data instancesrcData.ArmourStrength -= 10; //Sets value on the data}
//The rest of the class comprises of several event handlers for the other buttons}-------------------------------------------------------------------------------------
Now lets look at the data class that we created:
namespace PlayerSettings{class PlayerDetails : INotifyPropertyChanged
//We use this Class to Notify that we have updated the data{public int ArmourStrength{get{return armourStrength;}
set{ armourStrength = value; OnPropertyChanged("ArmourStrength"); //This calls the event to notify that property has changed UpdatePointsLeft();}}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged(String info) //Event handle handling the notifications{ if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(info)); }}
-----------------------------------------------------------------------
Thus when we set data on the data class, the PropertyChanged event is called which then updates the text property of the textbox.
Window1.xaml file just lays out the window information. The .cs file sets the values by getting them from the main screen which passes these values as parameters on clicking the submit button.
Window1.xaml.cs
public Window1(string name, string ArmourStrength, string Ammo,
string RunSpeed, string Accuracy, string Agility){ InitializeComponent(); lbName.Content = name; lbArmourStrength.Content = ArmourStrength; lbAmmo.Content = Ammo; lbRunSpeed.Content = RunSpeed; lbAccuracy.Content = Accuracy; lbAgility.Content = Agility;}
Thats all there is to data binding.... For further details you can refer to the SDK or to the blog of Beatriz.
Till next time. have fun!!