agiro agiro - 27 days ago 7
C# Question

WPF Display age from datepicker using data binding

I have a little

window
with a
datepicker
and a
label
. The goal is to display the age of a person whose birth date is picked. I'm using MVVM light for this and I need to use the
ViewModel.cs
. Can I do it using only
XAML
? If no, how to pull this off?

My ViewModel:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using GalaSoft.MvvmLight;
using System.Windows.Controls;

namespace zh1_beteges
{
public class PatientVM : ViewModelBase
{
Patient b = null;

int age;
DatePicker DP;
public int Age
{
get { return age; }
set { Set(ref age, value); }
}
public Patient B
{
get
{
return b;
}
set { Set(ref b, value); }
}
public PatientVM(DatePicker DP)
{
this.DP = DP;
}
public PatientVM(Patient b, DatePicker DP)
{
this.B = b;
this.DP = DP;
age = DateTime.Today.Year - b.DateOfBirth.Year;
}


}
}


and my XAML:

<Window x:Class="zh1_beteges.BetegAdatai"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:zh1_beteges"
mc:Ignorable="d"
Title="BetegAdatai" Height="314.894" Width="512.766"
WindowStartupLocation="CenterScreen"
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="0.7*"/>
<ColumnDefinition Width="0.7*"/>
</Grid.ColumnDefinitions>
<Label Content="Patient name:" HorizontalAlignment="Left" VerticalAlignment="Center"
FontSize="14" Margin="10,0,10,0" Grid.Row="0" Grid.Column="0">
</Label>
<Label Content="PlaceOfBirth: " HorizontalAlignment="Left" VerticalAlignment="Center"
FontSize="14" Margin="10,0,10,0" Grid.Row="1" Grid.Column="0">
</Label>
<Label Content="date of birth:" HorizontalAlignment="Left" VerticalAlignment="Center"
FontSize="14" Margin="10,0,10,0" Grid.Row="2" Grid.Column="0">
</Label>
<Label Content="TAJ:" HorizontalAlignment="Left" VerticalAlignment="Center"
FontSize="14" Margin="10,0,10,0" Grid.Row="3" Grid.Column="0">
</Label>
<Label Content="Age:" HorizontalAlignment="Left" VerticalAlignment="Center"
FontSize="14" Margin="10,0,10,0" Grid.Row="2" Grid.Column="2">
</Label>
<Label Content="{Binding Path=Age}" HorizontalAlignment="Left" VerticalAlignment="Center"
FontSize="14" Margin="10,0,10,0" Grid.Row="2" Grid.Column="3">
</Label>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="4" Margin="170,5,170,5"
Content="OK" FontSize="14">
</Button>
<DatePicker x:Name="DP" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center"
VerticalAlignment="Center" DisplayDateStart="2016/01/01"
SelectedDate="{Binding Path=B.SzuletesiDatum}">
</DatePicker>
<TextBox Margin="10,5,10,5" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3"
Text="{Binding Path=B.Name}" VerticalContentAlignment="Center" >
</TextBox>
<TextBox Margin="10,5,10,5" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3"
Text="{Binding Path=B.PlaceOfBirth}" VerticalContentAlignment="Center" >
</TextBox>
<TextBox Margin="10,5,10,5" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan="3"
Text="{Binding Path=B.TAJ}" VerticalContentAlignment="Center">
</TextBox>
</Grid>




And my Xaml.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace zh1_beteges
{
/// <summary>
/// Interaction logic for PatientData.xaml
/// </summary>
public partial class PatientData : Window
{
public PatientVM bvm;
public PatientData()
{
InitializeComponent();
bvm = new PatientVM(DP);
this.DataContext = bvm;
}
public PatientData(Patient b)
{
InitializeComponent();
bvm = new PatientVM(b,DP);
this.DataContext = bvm;
}
}
}

Answer

Yes you can do this using a custom converter. Custom converters allow you to bind a data to another value converted to or from that data. In your case you need a converter that converts selected date to time passed that date.

You should create a class like this:

public class DatetimeToPassedDateConverter : IValueConverter,MarkupExtension
{
    public object Convert(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        if(value is DateTime)
            return DateTime.Now-(DateTime)value;
        else
            return null;
    }

    public object ConvertBack(object value, Type targetType, 
        object parameter, CultureInfo culture)
    {
        // Convert back which is not required in your case
    }

    public override object ProvideValue(IServiceProvider serviceProvider)
    {
        return this;
    }
}

And then use it in your XAML like this:

<Label Content="{Binding ElementName=DP,Path=SelectedDate,Converter={namespace:DatetimeToPassedDateConverter}}" HorizontalAlignment="Left" VerticalAlignment="Center"
       FontSize="14" Margin="10,0,10,0" Grid.Row="2" Grid.Column="3">
</Label>

For more information about custom converters see this article.

Comments