Develop Reference

One SelectedItem For Multiple Wpf Controls

I have a list box Bound to XML data correctly , but i have multiple Tree Views inside this listbox which you can select item for every one of them!
i want single item selecting from all of these tree views. which every one of those are inside an unique expander.
if you look at my xml data ,consider i have 2 groups inside xml , i can select item for both of those groups in listbox which now they are different treeviews in my ui , and i want single item selecting for all this listbox items.
<ListBox Background="Transparent" BorderThickness="0" SelectedValue="{Binding SelectedMenuValue,Mode=TwoWay}" ItemsSource="{Binding Path=Items,Source={StaticResource XmlSourceMenu}}">
<ListBox.Resources>
<DataTemplate DataType="{x:Type revoxml:Group}">
<Expander Header="{Binding Title}">
<TreeView ItemsSource="{Binding Menus}">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding}">
<StackPanel Orientation="Horizontal" Margin="10 0">
<fa:ImageAwesome Height="30" Width="30" VerticalAlignment="Center" Margin="5" Icon="{Binding Icon}" />
<TextBlock Text="{Binding Title}" Height="30" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Expander>
</DataTemplate>
<DataTemplate DataType="{x:Type revoxml:SubMenu}">
<StackPanel Orientation="Horizontal" Margin="10 0">
<fa:ImageAwesome Height="30" Width="30" VerticalAlignment="Center" Margin="5" Icon="{Binding Icon}" />
<TextBlock Text="{Binding Title}" Height="30" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.Resources>
</ListBox>
for easier understanding data for this listbox comming from xml file like this :
<MainMenu>
<Group Title="title">
<SubMenu Icon="Inbox" Title="inbox" Tag="38"/>
<SubMenu Icon="CommentingOutline" Title="New Message" Tag="37"/>
<SubMenu Icon="Tachometer" Title="Archive" Tag="39"/>
<Menu Icon="CartArrowDown" Title="purchases" >
<SubMenu Icon="CartArrowDown" Title="new" Tag="26"/>
<SubMenu Icon="CartPlus" Title="list" Tag="28"/>
</Menu>
</Group>
<SubMenu Icon="InfoCircle" Title="info" Tag="6000" />
<SubMenu Icon="Close" Title="close" Tag="0"/>
</MainMenu>

this should solve it ! but you need to implement your own selected item, or you could change groupboxes to expander and items control to tree view to match your code
<Style TargetType="StackPanel" x:Key="HoverStackPanelStyle">
<Setter Property="Background" Value="Transparent"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
<ScrollViewer>
<HeaderedItemsControl Background="Transparent" ItemsSource="{Binding Path=Items,Source={StaticResource XmlSourceMenu}}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type revoxml:SubMenu}">
<StackPanel Orientation="Horizontal" Margin="10 0" Style="{StaticResource HoverStackPanelStyle}">
<fa:ImageAwesome Height="30" Width="30" VerticalAlignment="Center" Margin="5" Icon="{Binding Icon}" />
<TextBlock Text="{Binding Title}" FontFamily="{StaticResource nazanin}" Height="30" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</DataTemplate>
<HierarchicalDataTemplate DataType="{x:Type revoxml:Menu}" ItemsSource="{Binding Menus}">
<GroupBox Header="{Binding Title}" Margin="0 5">
<ItemsControl ItemsSource="{Binding Menus}">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type revoxml:SubMenu}">
<StackPanel Name="StackPanel" Orientation="Horizontal" Margin="10 0" Style="{StaticResource HoverStackPanelStyle}">
<fa:ImageAwesome Height="30" Width="30" VerticalAlignment="Center" Margin="5" Icon="{Binding Icon}" />
<TextBlock Text="{Binding Title}" FontFamily="{StaticResource nazanin}" Height="30" VerticalAlignment="Center" Margin="5"/>
</StackPanel>
</DataTemplate>
</ItemsControl.Resources>
</ItemsControl>
</GroupBox>
</HierarchicalDataTemplate>
</ItemsControl.Resources>
</HeaderedItemsControl>
</ScrollViewer>

WPF Binding to Text property Of a TextBlock inside Selected TabItem of a TabControl

I know normally we can use this codes to bind Selected Tab Header Text and show selected tab:
<TabControl Name="MyTabControl">
<TabItem Header="Tab1"/>
<TabItem Header="Tab2" />
</TabControl>
<Lable Content="{Binding ElementName=MyTabControl, Path=SelectedItem.Header}"/>
But how can i bind when i have this codes:
<TabControl Name="MyTabControl">
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/a.png" />
<TextBlock Text="Tab1" />
</StackPanel>
</TabItem.Header>
</TabItem>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/b.png" />
<TextBlock Text="Tab2" />
</StackPanel>
</TabItem.Header>
</TabItem>
<Lable Content="{Binding ??????????? "/>

Instead of assigning direct content to header you can make use of HeaderTemplate.
Refer below code.
<TabControl Name="MyTabControl">
<TabItem Header="Tab1">
<TabItem.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/a.png" />
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
<TabItem Header="Tab2">
<TabItem.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="/Images/b.png" />
<TextBlock Text="{Binding}"/>
</StackPanel>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
</TabControl>
<Label Content="{Binding ElementName=MyTabControl, Path=SelectedItem.Header}"/>

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

Binding is not working with data template in data template

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>

How to move text to center of ListBox?

I have almost tried everything but for some reason it is not working
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="5,30,5,10">
<TextBlock Text="View Options" FontSize="25" Style="{StaticResource PhoneTextNormalStyle}"/>
<ListBox HorizontalContentAlignment="Stretch" Background="Red" ItemsSource="{Binding Path=ViewOptions}" Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock HorizontalAlignment="Center" TextAlignment="Center" Text="{Binding}" FontSize="35" Margin="20" Style="{StaticResource PhoneTextNormalStyle}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
Above XAML give me
How to move the textblock to center of listboxitem?

<StackPanel Orientation="Vertical" Grid.Row="1" Margin="5,30,5,10">
<TextBlock Text="View Options" FontSize="25" Style="{StaticResource PhoneTextNormalStyle}"/>
<ListBox x:Name="listBox" HorizontalContentAlignment="Stretch" ItemsSource="{Binding Path=ViewOptions}" Margin="10,30,10,10">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock HorizontalAlignment="Center" TextAlignment="Center" Text="{Binding}" FontSize="35" Margin="20" Style="{StaticResource PhoneTextNormalStyle}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>

You need to change the HorizontalContentAlignment to center
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="5,30,5,10">
<TextBlock Text="View Options" FontSize="25" Style="{StaticResource PhoneTextNormalStyle}"/>
<ListBox HorizontalContentAlignment="Center" Background="Red" ItemsSource="{Binding Path=ViewOptions}" Margin="10">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock HorizontalAlignment="Center" TextAlignment="Center" Text="{Binding}" FontSize="35" Margin="20" Style="{StaticResource PhoneTextNormalStyle}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

I just tried this and it worked. Two possible differences:
My data source was a simple List<string>.
I removed the references to your styles (i.e. PhoneTextNormalStyle).
Are you binding to simple data?
Does PhoneTextNormalStyle specify left-alignment?