I used for the first time a custom Control (wpf). Here is what I want:
I want a Custom ListView with Custom ListViewItem (the challenge is I don’t know what’s on the “Form”, I just know it’s a Panel - I call "Form" what's on the ListViewItem ).
I have a CustomListView and a CustomListViewItem :
EDIT : CustomListView.cs
public class CustomListView : ItemsControl
{
public static readonly DependencyProperty ListContentProperty = DependencyProperty.Register("ListContent", typeof(IList), typeof(CustomListView), new PropertyMetadata());
public IList ListContent
{
get { return (IList)GetValue(ListContentProperty); }
set { SetValue(ListContentProperty, value); }
}
public CustomListView(ContentControl contentControl, IList list)
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomListView), new FrameworkPropertyMetadata(typeof(CustomListView)));
DataContext = list;
ItemsSource = list;
CustomListViewItem customListViewItem = new CustomListViewItem();
customListViewItem.Content = contentControl;
string xamlTemplate = XamlWriter.Save(customListViewItem);
string template =
"<DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>" +
xamlTemplate +
"</DataTemplate>";
ItemTemplate = (DataTemplate)XamlReader.Parse(template);
SetValue(TemplateContentProperty, contentControl);
}
}
EDIT : CustomListViewItem .cs
public class CustomListViewItem : ContentControl
{
public static readonly DependencyProperty MyEventProperty = DependencyProperty.Register("MyEvent", typeof(EventHandler), typeof(CustomListViewItem));
public static readonly DependencyProperty ListContentItemProperty = DependencyProperty.Register("ListContentItem", typeof(IList), typeof(CustomListViewItem), new PropertyMetadata());
public IList ListContentItem
{
get { return (IList)GetValue(ListContentItemProperty); }
set { SetValue(ListContentItemProperty, value); }
}
public EventHandler MyEvent
{
get { return (EventHandler)GetValue(MyEventProperty); }
set { SetValue(MyEventProperty, value); }
}
public CustomListViewItem()
{
DefaultStyleKey = typeof(CustomListViewItem);
}
//Some method for the Event on my button
The DataContext of the CustomListView is an ObservableCollection. When I create the “Form” directly on my CustomListViewItem, everything is perfect. I can sort with my button, add a new empty Form…
Now here is my problem.
Let’s say we have a class Person (with only a name) who implements INotifyPropertyChanged. We create some “Person” and add them to an ObservableCollection. On a new xaml element, we create a Template (PersonEditor) the “Form”, with some Binding.
What I want on the MainWindows is something like that:
CustomListView customListView = new CustomListView(new PersonEditor(), _person);
myContentControl.Content = customListView;
Where _person is the ObservableCollection. We give the Template of the Form to the CustomListViewItem and add it to a content of a ContentControl
EDIT : Generics.xaml :
<Style x:Key="{x:Type customControl:CustomListView}" TargetType="customControl:CustomListView" BasedOn="{StaticResource {x:Type ItemsControl}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type customControl:CustomListView}">
<Border>
<ItemsPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type customControl:CustomListViewItem}" TargetType="customControl:CustomListViewItem" BasedOn="{StaticResource {x:Type ContentControl}}">
<Setter Property="ListContentItem">
<Setter.Value>
<Binding Path="ListContent" RelativeSource="{RelativeSource FindAncestor,AncestorType=customControl:CustomListView}"></Binding>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="customControl:CustomListViewItem">
<Border Background="White" x:Name="borderSelect" Padding="0" Width="Auto" Height="Auto">
<DockPanel Width="Auto" Height="Auto" VerticalAlignment="Stretch">
<ContentPresenter/>
<StackPanel Orientation="Horizontal">
<StackPanel SnapsToDevicePixels="true" Orientation="Vertical" Margin="0">
<StackPanel SnapsToDevicePixels="true" Orientation="Horizontal" Margin="0">
<Button SnapsToDevicePixels="true" Style="{StaticResource SquareCorner}" Opacity="0.0" Margin="0 7 0 0" Height="30" Width="12" VerticalAlignment="top" HorizontalAlignment="Right" Content="x" Padding="0" x:Name="DeleteButton" Command="{TemplateBinding MyEvent}"/>
<StackPanel SnapsToDevicePixels="true" Orientation="Vertical">
<Button Style="{StaticResource RoundUpCorner}" Opacity="0.0" Margin="0 7 0 0" Height="15" Width="15" VerticalAlignment="top" HorizontalAlignment="Right" Content="^" Padding="0 0 0 5" x:Name="UpButton" Command="{TemplateBinding MyEvent}"/>
<Button Style="{StaticResource RoundDownCorner}" Opacity="0.0" Height="15" Width="15" VerticalAlignment="top" HorizontalAlignment="Right" Content="v" Padding="0" x:Name="DownButton" Command="{TemplateBinding MyEvent}"/>
</StackPanel>
</StackPanel>
</StackPanel>
<DockPanel VerticalAlignment="Stretch">
<Button Style="{StaticResource SquareLittleCorner}" DockPanel.Dock="Top" Opacity="0.0" Height="15" Width="15" VerticalAlignment="top" HorizontalAlignment="Right" Margin="1 0 0 0" Content="+" Padding="0" x:Name="AddUpButton" Command="{TemplateBinding MyEvent}"/>
<Button Style="{StaticResource SquareLittleCorner}" DockPanel.Dock="Bottom" Opacity="0.0" Height="15" Width="15" VerticalAlignment="bottom" HorizontalAlignment="Right" Margin="1 0 0 0" Content="+" Padding="0" x:Name="AddButton" Command="{TemplateBinding MyEvent}"/>
</DockPanel>
</StackPanel>
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The result is I only have one element that has the good Template, the other ones are created but empty.
I think the problem comes from the binding. But I don’t know what to do. I tried to create a new “Form” with xamlReader/xamlLoad (How can you clone a WPF object?) but with the binding again it’s not good. I also tried to clone the xaml but again, no binding and no event on button.
I don’t know what else I can do to solve this problem ? It’s my first time with a custom control so if I made a mistake (anything) just share please.
EDIT
I think my custom is better now, I follow the idea of the DataTemplate and ContentControl mix with xamlReader/xamlLoad. The Binding is good (same for Event). But, why when I used it before (like a Content not a Template) the Binding wasn't good ? And I don't know if xamlReader/xamlLoad is a good way to do that (I mean it looks more like some cheat).
Related
I am trying to delete the tab on click of a button(TabCloseButton) inside the tabitem header. but i can't get the tab as parent too. Can anyone help me find out how to pass the tab to the click method. Any code sample will be helpful.
<TabControl Name="ConnectionsTab" BorderThickness="0" Background="White">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Background="White">
<Border Name="Border" BorderBrush="#1b9ed2" Margin="6,0,12,0" Background="White">
<ContentPresenter Height="30" x:Name="ContentSite" ContentSource="Header" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="5,15,5,-5">
</ContentPresenter>
</Border>
<Button Background="Wheat" BorderBrush="Transparent" Name="TabCloseButton" Click="TabCloseButton_Click" HorizontalAlignment="Right" VerticalAlignment="Bottom" ToolTip="Close" HorizontalContentAlignment="Right" Padding="0">
<materialDesign:PackIcon Kind="Close" Foreground="Gray" HorizontalAlignment="Right"/>
</Button>
</Grid>
<ControlTemplate.Triggers>
...............
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="12"/>
</Style>
</TabControl.Resources>
<TabItem Header="Connections" IsSelected="True" TabIndex="0">
<TabItem.Content>
<Grid>
<TextBlock Name="errorMessage" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="Gray" Visibility="Hidden"></TextBlock>
<Grid Name="MainConnectionTab"/>
</Grid>
</TabItem.Content>
</TabItem>
<TabItem Header="machine1"></TabItem>
<TabItem Header="machine2"></TabItem>
</TabControl>
You could use a helper method that uses the VisualTreeHelper to find the parent TabItem in the visual tree:
private void TabCloseButton_Click(object sender, RoutedEventArgs e)
{
Button tabCloseButton = (Button)sender;
TabItem parentTab = FindParent<TabItem>(tabCloseButton);
if (parentTab != null)
ConnectionsTab.Items.Remove(parentTab);
}
private static T FindParent<T>(DependencyObject dependencyObject) where T : DependencyObject
{
DependencyObject parent = VisualTreeHelper.GetParent(dependencyObject);
if (parent == null)
return null;
T parentT = parent as T;
return parentT ?? FindParent<T>(parent);
}
I created a style for a checkbox in WPF and created an array of those checkboxes programmaticaly. The style is as follows
<Style x:Key="deviceZoom" TargetType="{x:Type CheckBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<DockPanel x:Name="dockPanel">
<Canvas Width="24.15" Height="23">
<Image Source="/Resources/Icons/deviceUnselectedDiscrete.png" x:Name="DeviceImage" Width="12" Height="19" Canvas.Top="4"/>
<Border x:Name="borderDevice"
CornerRadius="5"
Width="20"
Height="10"
Background="#222528"
BorderThickness="0"
Canvas.Top="1"
Canvas.Left="4.15">
<TextBlock x:Name="numBoards" HorizontalAlignment="Center" VerticalAlignment="Center" Padding=".1" FontSize="8" Foreground="White" Text="99"/>
</Border>
</Canvas>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And then I create some checkboxes like so and add to the root canvas
Style style = canvas.FindResource("deviceZoom") as Style;
var deviceCheckbox = new CheckBox();
canvas.Children.Add(deviceCheckbox);
deviceCheckbox.Style = style;
//Here I would like to set the label text
Now I would like to set from code behind a value to the label numBoards every time I have new data, but I don't know how. I tried using Dynamic Properties but didn't manage to set them well since the checkbox is created programmaticaly, and tried with binding but without success
CheckBox has Content property. Binding TextBlock.Text in template to owner Content via TemplateBinding.
<Style x:Key="deviceZoom" TargetType="{x:Type CheckBox}">
<Setter Property="Template" >
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<DockPanel x:Name="dockPanel">
<Canvas Width="24.15" Height="23">
<Image Source="/Resources/Icons/deviceUnselectedDiscrete.png" x:Name="DeviceImage" Width="12" Height="19" Canvas.Top="4"/>
<Border x:Name="borderDevice"
CornerRadius="5"
Width="20"
Height="10"
Background="#222528"
BorderThickness="0"
Canvas.Top="1"
Canvas.Left="4.15">
<TextBlock x:Name="numBoards"
HorizontalAlignment="Center" VerticalAlignment="Center"
Padding=".1" FontSize="8" Foreground="White"
Text="{TemplateBinding Content}"/>
</Border>
</Canvas>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you can assign Content and it will be displayed in TextBlock:
deviceCheckbox.Content = "I am deviceCheckbox";
first, add UserControl. and add new property. it bind numBoards. XAML is ..
<UserControl x:Class="yourproject.myCheckBox"
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:local="clr-namespace:yourproject"
mc:Ignorable="d" x:Name="rootCtrl"
d:DesignHeight="450" d:DesignWidth="800">
<Canvas>
<CheckBox DataContext="{Binding ElementName=rootCtrl}" >
<CheckBox.Template>
<ControlTemplate TargetType="{x:Type CheckBox}">
<DockPanel x:Name="dockPanel">
<Canvas Width="24.15" Height="23">
<Image Source="/Resources/Icons/deviceUnselectedDiscrete.png" x:Name="DeviceImage" Width="12" Height="19" Canvas.Top="4"/>
<Border x:Name="borderDevice"
CornerRadius="5"
Width="20"
Height="10"
Background="#222528"
BorderThickness="0"
Canvas.Top="1"
Canvas.Left="4.15">
<TextBlock x:Name="numBoards" HorizontalAlignment="Center" VerticalAlignment="Center" Padding=".1" FontSize="8" Foreground="White" Text="{Binding NumBoards}"/>
</Border>
</Canvas>
</DockPanel>
</ControlTemplate>
</CheckBox.Template>
</CheckBox>
</Canvas>
</UserControl>
Code is ..
public partial class myCheckBox : UserControl, INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
}
protected virtual void OnPropertyChanged(PropertyChangedEventArgs e)
{
var handler = this.PropertyChanged;
if (handler != null)
{
handler(this, e);
}
}
private string _NumBoards = "77";
public string NumBoards
{
get
{
return _NumBoards;
}
set
{
_NumBoards = value;
OnPropertyChanged("NumBoards");
}
}
public myCheckBox()
{
InitializeComponent();
}
}
and use myCheckBox control
var deviceCheckbox = new myCheckBox();
deviceCheckbox.NumBoards = "20";
canvas.Children.Add(deviceCheckbox);
The main idea is to have a button with default icon "yes.png" and text in it "Accept", but have a possibilty to change these two properties using only XAML(at the designing process, without compiling).
Current XAML window which has an area at the bottom with only two buttons:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<ResourceDictionary>
<Style x:Key="tb1" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="1" BorderBrush="#000" Padding="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="Files/Icons/no.png" Margin="10,0,0,0" Height="16" Width="16"></Image>
<TextBlock Grid.Column="1" Margin="10" VerticalAlignment="Center">Cancel</TextBlock>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="0,10,10,10"></Setter>
</Style>
</ResourceDictionary>
</Window.Resources>
<Grid>
<Border BorderThickness="0, 1, 0, 0" BorderBrush="#e7e7e7" HorizontalAlignment="Stretch" Padding="0,0,0,0" VerticalAlignment="Bottom" Height="61">
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Button x:Name="b_Accept" Style="{StaticResource tb1}"></Button> <!-- How to change an icon to "yes.png" and TextBlock's content to "Accept"? -->
<Button x:Name="b_Cancel" Style="{StaticResource tb1}"></Button>
</StackPanel>
</Border>
</Grid>
</Window>
Result:
Please,
How is it possible to change second button's icon to "no.png"(Source property) and TextBlock's text(Content) to "Cancel"(only using XAML and not User Control)?
What would be the very right way(the easiest?)? For example, in this post we might use DataTemplate, but might be that's not that we want to because DataTemplate changes the whole element, while we need only one property.
Although, I am right that there are only dependency property(C#) available for that purpose which expects compiling?
Thank you
You can create your custom Button class or an Attached Property to extend the Button:
public class IconControl : DependencyObject
{
#region IconUri attached property
public static readonly DependencyProperty IconUriProperty = DependencyProperty.RegisterAttached(
"IconUri", typeof(ImageSource), typeof(IconControl), new PropertyMetadata(default(ImageSource)));
public static void SetIconUri([NotNull] DependencyObject attachingElement, ImageSource value)
{
attachingElement.SetValue(IconControl.IconUriProperty, value);
}
public static ImageSource GetIconUri([NotNull] DependencyObject attachingElement) => (ImageSource) attachingElement.GetValue(IconControl.IconUriProperty);
#endregion
#region Label attached property
public static readonly DependencyProperty LabelProperty = DependencyProperty.RegisterAttached(
"Label", typeof(String), typeof(IconControl), new PropertyMetadata(default(String)));
public static void SetLabel([NotNull] DependencyObject attachingElement, String value)
{
attachingElement.SetValue(IconControl.LabelProperty, value);
}
public static String GetLabel([NotNull] DependencyObject attachingElement) => (String) attachingElement.GetValue(IconControl.LabelProperty);
#endregion
}
Modified Style for the Button:
<Style x:Key="IconButtonStyle"
TargetType="{x:Type Button}">
<!-- Set the default values -->
<Setter Property="IconControl.IconUri" Value="/Files/Icons/no.png"/>
<Setter Property="IconControl.Label" Value="Cancel"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border BorderThickness="1"
BorderBrush="#000"
Padding="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(IconControl.IconUri)}"
Margin="10,0,0,0"
Height="16"
Width="16" />
<TextBlock Grid.Column="1"
Margin="10"
VerticalAlignment="Center"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(IconControl.Label)}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Margin"
Value="0,10,10,10"></Setter>
</Style>
Usage:
<!-- Override the default content -->
<Button Style="{StaticResource IconButtonStyle}"
IconControl.IconUri="/Files/Icons/yes.png"
IconControl.Label="Accept" />
I've got one page in my WPF app that should display some "tiles" in number as I specify before. Tile looks like this:
So my page should look something like this:
It is achievable of course by manually cloning tiles, but I want to avoid this (achieve it in more programmatic way). So instead of creating 6 clones I should stick to only one and then if needed add remaining ones. How can I accomplish that? I guess I should create my own UserControl like this:
<Grid HorizontalAlignment="Left" Height="199" VerticalAlignment="Top" Width="207" Background="Black">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<Image x:Name="image1" HorizontalAlignment="Left" Height="175" VerticalAlignment="Top" Width="207" Stretch="UniformToFill"/>
<Grid HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="112" Background="#FFC78D10">
<TextBox IsReadOnly = "True" x:Name="CategoryOfEvent" Height="30" TextWrapping="Wrap" Text="Category" Width="112" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="18" SelectionBrush="{x:Null}" HorizontalAlignment="Left" VerticalAlignment="Top" >
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
<TextBox IsReadOnly = "True" x:Name="HourOfEvent" HorizontalAlignment="Left" Height="28" Margin="0,42,0,0" TextWrapping="Wrap" Text="Hour" VerticalAlignment="Top" Width="148" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FFE2E2E2" FontSize="22" SelectionBrush="{x:Null}" FontWeight="Bold" TextChanged="HourOfEvent_TextChanged">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<TextBox IsReadOnly = "True" x:Name="TitleOfEvent" HorizontalAlignment="Left" Height="88" Margin="0,82,0,0" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top" Width="207" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="20" SelectionBrush="{x:Null}" FontWeight="Bold">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<TextBox IsReadOnly = "True" x:Name="PlaceOfEvent" HorizontalAlignment="Left" Height="24" Margin="0,175,0,0" TextWrapping="Wrap" Text="Where" VerticalAlignment="Top" Width="207" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="14" SelectionBrush="{x:Null}">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
and just add them to my page. I would like also to mention that in every tiles there are 4 textboxes which are displaying some data parsed from Json, so maybe some automatic binding should do the job?
It is as simple as that.Firstly,what you can do is,create a UserControl with all your controls inside like TextBlocks and others.Then,decide which type of container control you want to use to hold your UserControl.Let's assume it's a grid.You can specify/set grid's column/rows for each user control.A sample :
private void addControl()
{
UserControl1 MyCon = new UserControl1;
MyGrid.Children.Add(MyCon);
Grid.SetRow(MyCon , 1); ////replace 1 with required row count
}
You can create grid rows in design time,or u can do it in code behind as well :
MyGrid.RowDefinitions.Add(new RowDefinition);
If you want to use columns instead,just apply same code but change Row/Rowdefinition with Column/ColumnDefinition
Hope this helps :)
The follwing example shows how to create multiple of the tiles you have been posting using a DataTemplate and WrapPanel. The DataTemplate specifies how an object (in this case a TileItem) is visualized. You can create multiple TileItems and then add them to an collection, in order to visualize them all.
Assuming your UI resides in MainWindow, you can create a collection with three items in it.
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TileItemCollection = new ObservableCollection<TileItem>(new []
{
new TileItem(){Category = "Alpha", Hour = "10", Title = "Hello World", Where = "Office"},
new TileItem(){Category = "Beta", Hour = "15", Title = "Test", Where = "Home"},
new TileItem(){Category = "Gamma", Hour = "44", Title = "My Title", Where = "Work"},
});
DataContext = this;
}
public ObservableCollection<TileItem> TileItemCollection { get; }
}
You could load your Items from JSON and create an TileItem for each one in the JSON document. The class for TileItemss can be found below.
public class TileItem : INotifyPropertyChanged
{
private string _hour;
private string _title;
private string _where;
private string _category;
public string Category
{
get => _category;
set
{
if (value == _category) return;
_category = value;
OnPropertyChanged();
}
}
public string Hour
{
get => _hour;
set
{
if (value == _hour) return;
_hour = value;
OnPropertyChanged();
}
}
public string Title
{
get => _title;
set
{
if (value == _title) return;
_title = value;
OnPropertyChanged();
}
}
public string Where
{
get => _where;
set
{
if (value == _where) return;
_where = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Note that in order for datachanges to be propagated to the UI, all properties which should be updated in the UI when you update them in code need to raise the property changed event. In this example all properties do this by default.
You can then update the XAML to bind to a collection. The ItemsControl acts as a container for the tiles. If you scroll down further you may notice the use of WrapPanel which is responsible for the item wrapping effect when you resize the control.
<ItemsControl ItemsSource="{Binding TileItemCollection}" Margin="20">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:TileItem}" >
<Grid HorizontalAlignment="Left" Height="199" VerticalAlignment="Top" Width="207" Background="Black">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<Image x:Name="image1" HorizontalAlignment="Left" Height="175" VerticalAlignment="Top" Width="207" Stretch="UniformToFill"/>
<Grid HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="112" Background="#FFC78D10">
<TextBox IsReadOnly="True" Height="30" TextWrapping="Wrap" Text="{Binding Path=Category}" Width="112" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="18" SelectionBrush="{x:Null}" HorizontalAlignment="Left" VerticalAlignment="Top" >
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
<TextBox IsReadOnly="True" HorizontalAlignment="Left" Height="28" Margin="0,42,0,0" TextWrapping="Wrap" Text="{Binding Path=Hour}" VerticalAlignment="Top" Width="148" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FFE2E2E2" FontSize="22" SelectionBrush="{x:Null}" FontWeight="Bold">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<TextBox IsReadOnly="True" HorizontalAlignment="Left" Height="88" Margin="0,82,0,0" TextWrapping="Wrap" Text="{Binding Path=Title}" VerticalAlignment="Top" Width="207" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="20" SelectionBrush="{x:Null}" FontWeight="Bold">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<TextBox IsReadOnly="True" x:Name="PlaceOfEvent" HorizontalAlignment="Left" Height="24" Margin="0,175,0,0" TextWrapping="Wrap" Text="{Binding Path=Where}" VerticalAlignment="Top" Width="207" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="14" SelectionBrush="{x:Null}">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
Each Tile is bound to an TileItem which means that the Bindings which point to e.g. Category, point to the Category of an TileItem.
To increase reusability it would be possible to move the code into its own usercontrol and optionally to add DependencyPropertys for better control.
I have the following templete
<ControlTemplate x:Key="tmpl_btn_TecnicianModeMenu" TargetType="{x:Type ListBoxItem}">
<Grid Opacity="1" d:LayoutOverrides="Width, Height">
<Border
x:Name="Border"
CornerRadius="0"
BorderThickness="0" Height="Auto" Margin="0" Background="White">
<StackPanel Name="stackPanel" Height="Auto" Margin="0" Orientation="Horizontal" >
<Button x:Name="button" Style="{DynamicResource ButtonListBoxItem}" Margin="5,5,5,5" Width="120" Height="Auto" BorderThickness="0" >
<TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="בצע" Margin="12,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" Style="{DynamicResource tb_Desc}"/>
</Button>
<StackPanel Height="Auto" Margin="0" Orientation="Horizontal" >
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" x:Name ="LB_Result" Text="LB_Result" Style="{DynamicResource LB_AreaTitle_Balance}" Margin="5,5,5,5" d:LayoutOverrides="Height" />
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" x:Name ="LB_OK" Text="LB_OK" Style="{DynamicResource LB_AreaTitle_Balance}" Margin="5,5,5,5" d:LayoutOverrides="Height" />
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" x:Name ="LB_TchName" Text="LB_TchName" Style="{DynamicResource LB_AreaTitle_Balance}" Margin="5,5,5,5"/>
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" x:Name ="LB_Date" Text="LB_Date" Style="{DynamicResource LB_AreaTitle_Balance}" Margin="5,5,5,5" d:LayoutOverrides="Height"/>
<TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" x:Name ="LB_CheckName" Text="{TemplateBinding Tag}" Style="{DynamicResource LB_AreaTitle_Balance}" Margin="5,5,5,5"/>
</StackPanel>
</StackPanel>
</Border>
<Border x:Name="Divide" BorderBrush="Gray" BorderThickness="0,0.5" Height="140" Width="Auto" Margin="18.5,0" VerticalAlignment="Bottom"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="True"/>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
** I have list box of such items.
I want to bind it to an observable list.
the problem is that the previus programer added items to the list like this:**
private void AddButtonToList(String LB_CheckName, String LB_Date, String LB_TchName, String LB_OK, String LB_Result, enmTechMode_Check enmCheck )
{
try
{
//create item
ListBoxItem item2 = new ListBoxItem();
//set template
item2.SetResourceReference(ListBoxItem.TemplateProperty, "tmpl_btn_TecnicianModeMenu");
item2.ApplyTemplate();
item2.Height = 45;
TextBlock txt1 = (TextBlock)item2.Template.FindName("LB_CheckName", item2);
txt1.Text = LB_CheckName;
txt1 = (TextBlock)item2.Template.FindName("LB_Date", item2);
txt1.Text = LB_Date;
txt1 = (TextBlock)item2.Template.FindName("LB_TchName", item2);
txt1.Text = LB_TchName;
txt1 = (TextBlock)item2.Template.FindName("LB_OK", item2);
txt1.Text = LB_OK;
txt1 = (TextBlock)item2.Template.FindName("LB_Result", item2);
txt1.Text = LB_Result;
Button bt = (Button)item2.Template.FindName("button", item2);
bt.SetResourceReference(Button.StyleProperty, "ButtonListBoxItem");
bt.ApplyTemplate();
bt.Click += new RoutedEventHandler(Item_Selected);
//set tag
bt.Tag = enmCheck;
//add to list
StackPanel sp = (StackPanel)ListBoxData.FindName("stackPanel");
item2.Tag = enmCheck;
sp.Children.Add(item2);
}
catch (Exception exp)
{
}
}
and I have no clue how to fix this
I assume theres suppose to be a use of a convertor? please provide me a direction
I assume the observable list suppose to be of structs. but how convert those to items in the temples format?
In a template you would usually bind to properties of the data object. If for example you have the data class below with a Result property
public class MyData
{
public string Result { get; set; }
...
}
you would bind like this:
<TextBlock Text="{Binding Path=Result}" ... />
Then you would not manually add ListBoxItems, but instead add data objects to the ObservableCollection, that the ItemsSource property of the ListBox is bound to:
myDataObjects.Add(
new MyData
{
Result = "A Result"
...
});
where myDataObjects is an ObservableCollection<MyData>.
In case you would need to get the UI updated when a data object changes which is already contained in the ObservableCollection, class MyData would need to implement INotifyPropertyChanged.