I have a collection with fields cityname, statename and countryname and I bind that collection to my wpf form. I want to display the cityname in a Textbox, the statename in a combobox and the countryname in a combobox. All the textboxes and comboboxes should come dynamically. How can I do this job?
Any one suggest me how to design this form dynamically in wpf using MVVM
I am trying to do this code but not get result properly
<UserControl.Resources>
<DataTemplate x:Key="IntegerTemplate">
<DockPanel>
<TextBox Margin="10,0,0,0" x:Name="IntegerTemplate" Grid.Column="1" MaxLength="{Binding Path=CardField.MaximumLength}" Text="{Binding Path=CardField.FieldData, Mode=TwoWay}" />
</DockPanel>
</DataTemplate>
<DataTemplate x:Key="StringTemplate">
<DockPanel>
<ComboBox Margin="10,0,0,0" x:Name="cmbFieldData" Grid.Column="1" Text="{Binding Path=CardField.FieldData, Mode=TwoWay}" />
</DockPanel>
</DataTemplate>
<DataTemplate x:Key="DefaultTemplate">
</DataTemplate>
<DataTemplate x:Key="dataTemplate">
<ContentControl x:Name="MyContentControl" Content="{Binding}" ContentTemplate="{StaticResource DefaultTemplate}"/>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=CardField.FieldTag}" Value="City">
<Setter TargetName="MyContentControl" Property="ContentTemplate"
Value="{StaticResource IntegerTemplate}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=CardField.FieldTag}" Value="State">
<Setter TargetName="MyContentControl" Property="ContentTemplate"
Value="{StaticResource StringTemplate}" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=CardField.FieldTag}" Value="Country">
<Setter TargetName="MyContentControl" Property="ContentTemplate"
Value="{StaticResource StringTemplate}" />
</DataTrigger>
<!-- and so on -->
</DataTemplate.Triggers>
</DataTemplate>
</UserControl.Resources>
we are using this code in our xaml page
<ItemsControl x:Name="items"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource dataTemplate}"
/>
UPDATE:
i am trying to do this following code:
<TextBlock x:Name="tbFieldTag" Cursor="Hand" VerticalAlignment="Center" HorizontalAlignment="Stretch" TextWrapping="Wrap" Margin="10,0,0,0" Text="{Binding Path=CardField.FieldTag}" />
<ItemsControl x:Name="items"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource dataTemplate}"/>
In that i got Value of TextBlock but i am not getting the value in ItemTemplate. so where I doing wrong?
Try this:
1) data template selector
public class CardFieldTemplateSelector : IValueConverter
{
public DataTemplate CityNameTemplate { get; set; }
public DataTemplate StateNameTemplate { get; set; }
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
string fieldTag = (string) value;
switch (fieldTag)
{
case "City":
return CityNameTemplate;
case "State":
return StateNameTemplate;
}
throw new ArgumentOutOfRangeException();
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotSupportedException();
}
}
2) XAML:
<selectors:CardFieldTemplateSelector x:Key="cardFieldTemplateSelector">
<selectors:CardFieldTemplateSelector.CityNameTemplate>
<DataTemplate>
<DockPanel>
<TextBox Margin="10,0,0,0" x:Name="IntegerTemplate" Grid.Column="1" MaxLength="{Binding Path=CardField.MaximumLength}" Text="{Binding Path=CardField.FieldData, Mode=TwoWay}" />
</DockPanel>
</DataTemplate>
</selectors:CardFieldTemplateSelector.CityNameTemplate>
<selectors:CardFieldTemplateSelector.StateNameTemplate>
<DataTemplate>
<DockPanel>
<ComboBox Margin="10,0,0,0" x:Name="cmbFieldData" Grid.Column="1" Text="{Binding Path=CardField.FieldData, Mode=TwoWay}" />
</DockPanel>
</DataTemplate>
</selectors:CardFieldTemplateSelector.StateNameTemplate>
</selectors:CardFieldTemplateSelector>
<DataTemplate x:Key="dataTemplate">
<ContentControl x:Name="MyContentControl"
Content="{Binding}"
ContentTemplate="{Binding CardField.FieldTag, Converter={StaticResource cardFieldTemplateSelector}"/>
</DataTemplate>
<ItemsControl x:Name="items"
ItemsSource="{Binding}"
ItemTemplate="{StaticResource dataTemplate}"/>
Why can;t you use the WPF Data Form from Codeplex.
You can add custom editors in this form, based on the data types.
Hope this help.
Related
I have this ComboBox:
<ComboBox
ItemsSource="{Binding imageFormats}">
<ComboBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock DockPanel.Dock="Left" Text="{Binding Extension}" />
<TextBlock DockPanel.Dock="Left" Text=" - " />
<TextBlock DockPanel.Dock="Right" Text="{Binding Description}" />
</DockPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
Which is bound to this list:
private List<ImageFormatModel> imageFormats = new List<ImageFormatModel>();
public MainWindow()
{
ComboBoxImages.ItemsSource = imageFormats;
}
The Object ImageFormatModel consists of two strings:
public class ImageFormatModel
{
public string Extension { get; set; }
public string Description { get; set; }
}
Is possible that the selected item shows only the extension but in the dropdown menu both are shown?
Both values should be shown in this menu:
But if I select one, only the extension should be visible. Not like this:
You could apply a Style with a DataTrigger to the TextBlock elements to be hidden:
<DataTemplate>
<DockPanel>
<DockPanel.Resources>
<Style x:Key="tbStyle" TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ComboBoxItem}}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</DockPanel.Resources>
<TextBlock DockPanel.Dock="Left" Text="{Binding Extension}" />
<TextBlock DockPanel.Dock="Left" Text=" - " Style="{StaticResource tbStyle}" />
<TextBlock DockPanel.Dock="Right" Text="{Binding Description}" Style="{StaticResource tbStyle}" />
</DockPanel>
</DataTemplate>
I have a model view and a property called isEnable and I would like to set the comboboxItem IsEnable property with binding to property created in the model view , the problem is that I have datatemplate created inside a combobox , so it's not a simple Combobox , this is my code:
<ComboBox x:Name="ComboBoxUsers" ItemsSource="{Binding Users}" FontFamily="Arial" FontSize="11" Grid.Row="3" Height="30" Margin="10,5,5,5">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<Image />
<TextBlock />
</StackPanel>
<DataTemplate.Resources>
<Style TargetType="ComboBoxItem">
<Setter Property="IsEnable" Value="{Binding IsEnable}"/>
</Style>
</DataTemplate.Resources>
</DataTemplate>
</ComboBox.ItemTemplate>
Simple Class of Users:
public class Users
{
public string Name { get; set; }
public bool IsEnable { get; set; }
public Users()
{
}
}
How can I achieve that?
I solved my problem by adding this code :
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem"
<Setter Property="IsEnable" Value="{Binding IsEnable}" />
</Style>
</ComboBox.ItemContainerStyle>
So the complete code will be :
<ComboBox x:Name="ComboBoxUsers" ItemsSource="{Binding Users}" FontFamily="Arial" FontSize="11" Grid.Row="3" Height="30" Margin="10,5,5,5">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" >
<Image />
<TextBlock />
</StackPanel>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem" >
<Setter Property="IsEnable" Value="{Binding IsEnable}" />
</Style>
</ComboBox.ItemContainerStyle>
</DataTemplate>
</ComboBox.ItemTemplate>
In my WPF Application, I have Item control which shows Dates and Days of a week.
Now,I need to change the background color of the Item which is today's date.
Here is the XAML code
<ItemsControl Grid.Column="1"
Focusable="False"
ItemsSource="{Binding WeekDays}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate >
<DataTemplate>
<Border BorderBrush="{StaticResource GrayBrush7}"
BorderThickness="1,0,0,0"
SnapsToDevicePixels="True"
UseLayoutRounding="True">
<StackPanel Margin="2"
VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Text="{Binding Day}"
TextAlignment="Center"/>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Text="{Binding Date,
StringFormat='dd/MM/yyyy'}"
TextAlignment="Center"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Thanks in Advance.
You can use DataTrigger in Border Style if you have IsToday property in model class. Like this
public class WeekDay
{
public DateTime Date { get; }
public string Day { get; }
public bool IsToday { get; }
public WeekDay(DateTime date)
{
this.Date = date;
this.Day = date.DayOfWeek.ToString();
this.IsToday = date.Date == DateTime.Today;
}
}
<ItemsControl.ItemTemplate >
<DataTemplate>
<Border BorderBrush="{StaticResource GrayBrush7}"
BorderThickness="1,0,0,0"
SnapsToDevicePixels="True"
UseLayoutRounding="True">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsToday}" Value="True">
<Setter Property="Background" Value="Yellow" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
...
As an alternative, you can use ValueConverter to convert Date to Background.
public class DateToItemBackgroundConverter : IValueConverter
{
private static readonly Brush TodayBGBrush = new SolidColorBrush(Colors.Yellow);
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value == null || !(value is DateTime))
{
return value;
}
var isToday = ((DateTime)value).Date == DateTime.Today;
return isToday ? TodayBGBrush : null;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
<ItemsControl Grid.Column="1"
Focusable="False"
ItemsSource="{Binding WeekDays}">
<ItemsControl.Resources>
<local:DateToItemBackgroundConverter x:Key="bgConverter" />
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate >
<DataTemplate>
<Border BorderBrush="{StaticResource GrayBrush7}"
Background="{Binding Date, Converter={StaticResource bgConverter}}"
BorderThickness="1,0,0,0"
SnapsToDevicePixels="True"
UseLayoutRounding="True">
...
Remember if you wanna refresh background when TODAY is updated, you should rebuild model data or notify PropertyChanged again.
You could just add a Border style with a DataTrigger to your ItemTemplate. Compare the Date property of your DateTime property with the static DateTime.Today property:
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="{StaticResource GrayBrush7}"
BorderThickness="1,0,0,0"
SnapsToDevicePixels="True"
UseLayoutRounding="True">
<Border.Style>
<Style TargetType="Border" xmlns:system="clr-namespace:System;assembly=mscorlib">
<Style.Triggers>
<DataTrigger Binding="{Binding Date.Date}" Value="{x:Static system:DateTime.Today}">
<Setter Property="Background" Value="Yellow" />
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<StackPanel Margin="2"
VerticalAlignment="Center">
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Text="{Binding Day}"
TextAlignment="Center"/>
<TextBlock HorizontalAlignment="Center"
VerticalAlignment="Top"
Text="{Binding Date, StringFormat='dd/MM/yyyy'}"
TextAlignment="Center"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
I've successfully put a button inside each listview item. But I want to obtain the Item on which the button is.. In this case each item is a Friend and has a button on click of the button I want to now which friend it is. How can I achieve this?
VIEW
<ListView x:Name="dataGrid" ItemsSource="{Binding Friends}" Height="314" BorderThickness="0" SelectedItem="{Binding SelectedItemFriends}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="Resources\Images\ic_status.png" Height="24" Width="18"/>
<StackPanel Margin="5" Orientation="Vertical">
<TextBlock FontWeight="Bold" Text="{Binding name}"/>
<StackPanel x:Name="RemoveItems" Margin="5" Orientation="Vertical">
<TextBlock Text="{Binding lastLocation}"/>
<TextBlock Text="{Binding timestamp}"/>
</StackPanel>
<StackPanel x:Name="AdditionItems" Margin="5" Orientation="Vertical" Visibility="Collapsed">
<TextBlock Text="{Binding Path=loc.area}"/>
<TextBlock Text="{Binding Path=loc.building}"/>
<TextBlock Text="{Binding Path=loc.floor}"/>
<TextBlock Text="{Binding Path=loc.room}"/>
</StackPanel>
</StackPanel>
<Button Style="{DynamicResource FlatButtonStyle}" Command="{Binding DataContext.SelectViewCommand, ElementName=GeneralWindowView}" CommandParameter="ChatViewModel" x:Name="button1" Content="Chat" Margin="10">
<Button.Template>
<ControlTemplate>
<Image Source="Resources\Images\chat_image.png"/>
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListViewItem}}, Path=IsSelected}" Value="true">
<Setter TargetName="AdditionItems" Property="Visibility" Value="Visible"/>
<Setter TargetName="RemoveItems" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Best regards,
Antoine
You can bind the CommandParameter to the ListViewItem to which the Button belongs. Something like:
<Button x:Name="button1"
Command="{Binding DataContext.SelectViewCommand,
ElementName=GeneralWindowView}"
CommandParameter="{Binding}">
In this way, the CommandParameter is always the ViewModel of the ListViewItem on which the Button stays.
As a side node, I think that if the SelectViewCommand deals with the current ListViewItem, maybe the Command should stay on the ViewModel of the ListViewItem, not the one on the GeneralWindowView...
Any way, hope this helps.
You could do something like this....
class Friend
{
// Other properties......
public string Link_1 { get; set; }
}
set Link_1 = "ChatViewModel" somewhere
XAML
<Button x:Name="button1" Command="{Binding DataContext.SelectViewCommand, ElementName=GeneralWindowView}" CommandParameter="{Binding}">
then in your SelectViewCommand Command handler
public void OnSelectViewCommand (dynamic obj)
{
this.Current_ViewModel = this.GetViewModel(obj.Link_1);
}
EDIT........
There is another way that directly addresses the issue of sending multiple parameters in the CommandParameter...
XAML
add the manespace
xmlns:Converters="clr-namespace:CommandParameterExample.Converters"
add the Resource
<UserControl.Resources>
<Converters:CommandParameter_Converter x:Key="CommandParameter_Converter" />
</UserControl.Resources>
Add a hidden Text Block
<TextBlock Visibility="Collapsed" Name="VM" Text="ChatViewModel"></TextBlock>
Here is your Button
<Button Content="Chat" Command="{Binding DataContext.SelectViewCommand, ElementName=GeneralWindowView}" >
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource CommandParameter_Converter}">
<Binding/>
<Binding Path="Text" ElementName="VM"/>
</MultiBinding>
</Button.CommandParameter>
</Button>
Here is the CommandParameter_Converter
class CommandParameter_Converter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
return values.Clone(); // simply return an array
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
and here is your SelectViewCommand
public void OnSelectViewCommand (object parameter)
{
var values = (object[])parameter;
var FriendObject = (dynamic)values[0];
var ViewModelName = (string)values[1];
}
This is the correct way to resolve your issue (sending 2 arguments in CommandParameter). But as you can see, it's rather involved....
so i trying to create the datagrid out from msdn
but i getting an error and i am not sure why as i copy pastet the whole thing directly from msdn
i getting the error on the
<local:CompleteConverter x:Key="completeConverter" />
<local:Tasks x:Key="tasks" />
that says
it doesn't exists in clr-namespace:DGGroupSortFilterExample
i be using that one in the Example section
CS
namespace DGGroupSortFilterExample
{
public class CompleteConverter : IValueConverter
{
// This converter changes the value of a Tasks Complete status from true/false to a string value of
// "Complete"/"Active" for use in the row group header.
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
bool complete = (bool)value;
if (complete)
return "Complete";
else
return "Active";
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
string strComplete = (string)value;
if (strComplete == "Complete")
return true;
else
return false;
}
}
public class Task : INotifyPropertyChanged, IEditableObject
{
// The Task class implements INotifyPropertyChanged and IEditableObject
// so that the datagrid can properly respond to changes to the
// data collection and edits made in the DataGrid.
// Private task data.
private string m_ProjectName = string.Empty;
private string m_TaskName = string.Empty;
private DateTime m_DueDate = DateTime.Now;
private bool m_Complete = false;
// Data for undoing canceled edits.
private Task temp_Task = null;
private bool m_Editing = false;
// Public properties.
public string ProjectName
{
get { return this.m_ProjectName; }
set
{
if (value != this.m_ProjectName)
{
this.m_ProjectName = value;
NotifyPropertyChanged("ProjectName");
}
}
}
public class Tasks : ObservableCollection<Task>
{
// Creating the Tasks collection in this way enables data binding from XAML.
}
}
Xaml
<Window x:Class="DGGroupSortFilterExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DGGroupSortFilterExample"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
Title="Group, Sort, and Filter Example" Height="575" Width="525">
<Window.Resources>
<local:CompleteConverter x:Key="completeConverter" />
<local:Tasks x:Key="tasks" />
<CollectionViewSource x:Key="cvsTasks" Source="{StaticResource tasks}"
Filter="CollectionViewSource_Filter">
<CollectionViewSource.SortDescriptions>
<!-- Requires 'xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"' declaration. -->
<scm:SortDescription PropertyName="ProjectName"/>
<scm:SortDescription PropertyName="Complete" />
<scm:SortDescription PropertyName="DueDate" />
</CollectionViewSource.SortDescriptions>
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="ProjectName"/>
<PropertyGroupDescription PropertyName="Complete"/>
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<DataGrid x:Name="dataGrid1"
ItemsSource="{Binding Source={StaticResource cvsTasks}}"
CanUserAddRows="False">
<DataGrid.GroupStyle>
<!-- Style for groups at top level. -->
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Margin" Value="0,0,0,5"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True" Background="#FF112255" BorderBrush="#FF002255" Foreground="#FFEEEEEE" BorderThickness="1,1,1,5">
<Expander.Header>
<DockPanel>
<TextBlock FontWeight="Bold" Text="{Binding Path=Name}" Margin="5,0,0,0" Width="100"/>
<TextBlock FontWeight="Bold" Text="{Binding Path=ItemCount}"/>
</DockPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
<!-- Style for groups under the top level. -->
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<DockPanel Background="LightBlue">
<TextBlock Text="{Binding Path=Name, Converter={StaticResource completeConverter}}" Foreground="Blue" Margin="30,0,0,0" Width="100"/>
<TextBlock Text="{Binding Path=ItemCount}" Foreground="Blue"/>
</DockPanel>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Setter Property="Foreground" Value="Black" />
<Setter Property="Background" Value="White" />
</Style>
</DataGrid.RowStyle>
</DataGrid>
<StackPanel Orientation="Horizontal" Grid.Row="1">
<TextBlock Text=" Filter completed items " VerticalAlignment="Center" />
<CheckBox x:Name="cbCompleteFilter" VerticalAlignment="Center"
Checked="CompleteFilter_Changed" Unchecked="CompleteFilter_Changed" />
<Button Content="Remove Groups" Margin="10,2,2,2" Click="UngroupButton_Click" />
<Button Content="Group by Project/Status" Margin="2" Click="GroupButton_Click" />
</StackPanel>
</Grid>
</Window>
First, try compiling.. the designer is made aware of new classes only after compilation. if after compilation this isn't resolved- post your entire XAML document, and c# code for that class. Make sure the namespace and using statements are visible.