Binding is not working with data template in data template - c#

I have a ListView with an nested ItemTemplate for presenting orders.
Each order is presented within a Expander. These Expanders have a ContentTemplate for presenting all positions within each order. And these order positions are also in a Expander.
The ListView gets its data from an ObservableCollection (AvailableOrders) which contains all orders. These order object have a ObservableCollection "Items" holding all positions for this order.
But I'm not able to get the bindings work properly. How should I properly set the binding for the "inner expander" to show information about the items?
All ideas are appreciated!
<ListView ItemsSource="{Binding VMOrder.AvailableOrders}">
<ListView.ItemTemplate>
<DataTemplate>
<Expander Content="{Binding}">
<Expander.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Order " />
<TextBlock Text="{Binding Id}" />
</StackPanel>
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.Template>
<ControlTemplate>
<Expander>
<Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Material.Name}" />
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<TextBlock Text="TEST" />
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

I've figured it out now.
I need to use a relative source in the data templates and set the content property of each expander.
<ListView ItemsSource="{Binding VMOrder.AvailableOrders}">
<ListView.ItemTemplate>
<DataTemplate>
<Expander Content="{Binding}">
<Expander.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Order " />
<TextBlock Text="{Binding DataContext.Id, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" />
</StackPanel>
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Content="{Binding}">
<Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding DataContext.Material.Name, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" />
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding DataContext.Material.Description, RelativeSource={RelativeSource FindAncestor, AncestorType=Expander}}" />
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

For the inner ItemsControl, you have defined the control template for the whole control. You have to define the ItemTemplate instead
<ItemsControl ItemsSource="{Binding Items}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Material.Name}" />
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.ContentTemplate>
<DataTemplate>
<TextBlock Text="TEST" />
</DataTemplate>
</Expander.ContentTemplate>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

Related

How to make Single lined tabitems header in wpf?

I have made dynamically generated tab items.My output It displays tab header 5 nos in horizontally then it comes in the next row. I want it in single line.
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" MaxWidth="130" MinWidth="130" >
<TextBlock Text="{Binding Header}" FontFamily="Arial"/>
<CheckBox Margin="10 0 0 0" IsChecked="{Binding isactive,Mode=TwoWay}" x:Name="chkbx" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<UserControl Content="{Binding TabConten}"></UserControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
You could put it inside a ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Auto" >
<TabControl>
<TabControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" MaxWidth="130" MinWidth="130" >
<TextBlock Text="{Binding Header}" FontFamily="Arial"/>
<CheckBox Margin="10 0 0 0" IsChecked="{Binding isactive,Mode=TwoWay}" x:Name="chkbx" />
</StackPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<UserControl Content="{Binding TabConten}"></UserControl>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</ScrollViewer>

How to apply multiple styles in WPF TreeView

I am beginner on WPF and need help.
Problem:
I have 2 Tree View on the form and need to apply 2 different style on pair of 2 Tree View Comparison.
Is there any way we can achieve this ?
I have 2 Tree View look like this
<TreeView x:Name="Source1PermissionTreeView" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="630" Width="890" >
<TreeView.Resources>
<DataTemplate DataType="{x:Type entities:SharePointUser}">
<DockPanel>
<CheckBox />
<Image Source="E:\SWorking\SharePointSecurityApps\SharePointSecurityApps\SharePointSecurityApps.WPF\Images\user.png"/>
<TextBlock Text="{Binding Path=Title}"/>
</DockPanel>
</DataTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}" DataType="{x:Type entities:SitePermission}">
<DockPanel>
<CheckBox />
<Image Source="E:\SWorking\SharePointSecurityApps\SharePointSecurityApps\SharePointSecurityApps.WPF\Images\sitepermission.png"/>
<TextBlock Text="{Binding Path=Title}"></TextBlock>
</DockPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}" DataType="{x:Type entities:SharePointGroup}">
<DockPanel>
<CheckBox />
<Image Source="E:\SWorking\SharePointSecurityApps\SharePointSecurityApps\SharePointSecurityApps.WPF\Images\group.png"/>
<TextBlock Text="{Binding Path=Title}"/>
</DockPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}" DataType="{x:Type entities:SharePointList}">
<DockPanel>
<CheckBox />
<Image Source="E:\SWorking\SharePointSecurityApps\SharePointSecurityApps\SharePointSecurityApps.WPF\Images\List.PNG"/>
<TextBlock Text="{Binding Path=Title}"/>
</DockPanel>
</HierarchicalDataTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}" DataType="{x:Type entities:SharePointSite}">
<DockPanel>
<CheckBox />
<Image Source="E:\SWorking\SharePointSecurityApps\SharePointSecurityApps\SharePointSecurityApps.WPF\Images\Site.png"/>
<TextBlock Text="{Binding Path=Title}"/>
</DockPanel>
</HierarchicalDataTemplate>
</TreeView.Resources>
How can I apply style in tree view?

Binding background of datatemplate in contentcontrol

I am trying to bind the background color of a TextBox and use a converter. However, I can't figure out the correct binding due to the TextBox being in a DataTemplate and in a ContentControl.
The DebuggingConverter doesn't fire unless I set the binding path from Path=StateColor to Path=.
Here is the xaml :
<GridViewColumn Header="Value" Width="{Binding SelectedDeviceCol2, Source={x:Static properties:Settings.Default}, Mode=TwoWay}" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<ContentControl Content="{Binding Path=Value, Mode=TwoWay}" IsEnabled="{Binding Path=ReadOnly, Converter={StaticResource readOnlyToEnabledConverter}}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type viewModels:VMDeviceCommand}">
<Button Content="{Binding Name}" Height="24" IsEnabled="True" Click="Button_Click_GetObjectProperty"/>
</DataTemplate>
<DataTemplate DataType="{x:Type System:DateTime}">
<DatePicker SelectedDate="{Binding Path=.}"
SelectedDateFormat="Short"
FirstDayOfWeek="Monday"
IsTodayHighlighted="True" >
</DatePicker>
</DataTemplate>
<DataTemplate DataType="{x:Type System:String}">
<TextBox Text="{Binding Path=.}" TextChanged="TextBox_OnTextChanged">
<TextBox.Background>
<SolidColorBrush Color="{Binding RelativeSource={RelativeSource AncestorType=ContentControl}, Path=StateColor, Converter={StaticResource DebuggingConverter}}"/>
</TextBox.Background>
</TextBox>
</DataTemplate>
<DataTemplate DataType="{x:Type System:UInt16}">
<xctk:IntegerUpDown Text="{Binding Path=.}" ValueChanged="UpDownBase_OnValueChanged" >
</xctk:IntegerUpDown>
</DataTemplate>
<DataTemplate DataType="{x:Type System:Boolean}">
<CheckBox IsChecked="{Binding Path=.}" Click="CheckBox_Click"/>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</DataTemplate>
</GridViewColumn.CellTemplate>
ContentControl doesn't have a StateColor property, so the Binding never gets its value and never has anything to pass to a converter.
If the ContentControl's DataContext has a StateColor property, that's easy:
<SolidColorBrush
Color="{Binding DataContext.StateColor, RelativeSource={RelativeSource AncestorType=ContentControl}, Converter={StaticResource DebuggingConverter}}"
/>

How todo nested Databinding with Windows Phone (Pivot and ListBox)

I am pretty new in the usage of the DataBinding concept in Windows Phone. I am trying to bind a Pivot page with a list of items, as well as a ListBox in each PivotItem with another list (of criterias). I have a Page with the following XAML:
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<ListBox Name="CriteriasListBox" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Text="{Binding Name}"/>
<tk:Rating />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
I then try to specify the ItemSource of each binded control in the C# code like this:
...
ItemsPivot.ItemsSource = ItemList;
CriteriasListBox.ItemsSource = CriteriaList; // <-- CriteriasListBox not accessible !!
...
But there is an error stating that "the name 'CriteriasListBox' does not exist in the current context"... As I mention, I am pretty new with this technology.
Can I have some advice, solution or resources on how do make this nested binding work?
Thank you !
Do like this,
<UserControl.Resources>
<DataTemplate x:Key="MyPivotItemTemplate">
<controls:PivotItem Header="first" >
<ListBox x:Name="CriteriasListBox" Margin="0,0,12,0" ItemsSource="{Binding CriteriaList}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132">
<TextBlock Text="{Binding Name}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</controls:PivotItem>
</DataTemplate>
</UserControl.Resources>
Then in your pivot
<Pivot ItemsTemplate="{StaticResource MyPivotItemTemplate}" Items="{Binding ItemList}"
One of the ways if you have different criteria list for different items is to add criteria list property to your PivotItemViewModel. Your c# code will look like this
ItemsPivot.ItemsSource = ItemList;
where every item in ItemList contains CriteriaList. Your xaml code will look like
<phone:Pivot Name="ItemsPivot" Title="MY APPLICATION">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel Margin="12,17,0,28">
<TextBlock Name="PivotTextBlock" Text="{Binding Name}"/>
<ListBox ItemsSource="{Binding Criterions}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" >
<TextBlock Name="ListTextBlock" Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
Binding for PivotTextBlock retrieves Name property from the PivotItemViewModel. Binding for ListTextBlock retrieves Name property from Criteria.
If criteria list the only in your application here is a good start
Here is another good way I found...
http://www.codeproject.com/Articles/47229/A-LINQ-Tutorial-WPF-Data-Binding-with-LINQ-to-SQL
Here is a code snippet:
<DataTemplate DataType="{x:Type LINQDemo:Category}">
<Border Name="border" BorderBrush="ForestGreen"
BorderThickness="1" Padding="5" Margin="5">
<StackPanel>
<TextBlock Text="{Binding Path=Name}"
FontWeight="Bold" FontSize="14"/>
<ListView ItemsSource="{Binding Path=Books}"
HorizontalContentAlignment="Stretch" BorderThickness="0" >
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink Click="LoadIndividualBook"
CommandParameter="{Binding}"
ToolTip="Display book details">
<TextBlock Text="{Binding Path=Title}"/></Hyperlink>
...

Multi-column stackpanel or alternative

I have the following XAML code:
<StackPanel Background="White" Margin="267,207,0,44" Grid.ColumnSpan="2">
<ScrollViewer Margin="30,30,0,30" Height="444">
<ItemsControl Name="ListCountries">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,0,10,0" Width="100">
<TextBlock Text="{Binding Key}" Foreground="Red" />
<ItemsControl ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,10,0,0">
<TextBlock TextWrapping="Wrap" Text="{Binding title}" Foreground="Black" />
<TextBlock TextWrapping="Wrap" Text="{Binding desc}" Foreground="Gray" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</StackPanel>
I set the itemSource of the itemsControl named ListCountries, with a IEnumerable> and it prints a list of titles, followed by a list of objects of the OtherClass.
My problem is that , the columns that are filled sometimes are bigger than the height of the Stackpanel that they are inserted to, i want to be able to split my inner list of into columns.
as you can see in the image, Belgium country gets splited into 2 columns
right now all my countries are single column with vertical scroll.
You should use a GridView for this. Here's some code slightly modified from a Grid app in Visual Studio
<GridView
x:Name="itemGridView"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
Height="600">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="200">
<TextBlock Text="{Binding Description}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Here's a screenshot of what this looks like, with sample data

Categories

Resources