Develop Reference

How to display items inside listbox in dinamically created tab item

I have data stored in IGroupping field of my repository class. I want to create tab item for each group of this collection, showing it`s items in listbox.
This is my code for creating tab items:
foreach (var group in repository.Products)
{
var tab = new MyTabItem();
tab.Header = group.Key;
tab.Products = group.AsEnumerable().ToList();
tab.FontSize = 16;
TabControlProducts.Items.Add(tab);
}
TabControlProducts.SelectedIndex = 0;
Here`s part of my xaml file:
<TabControl Grid.Row="1" Grid.Column="1" x:Name="TabControlProducts">
<TabControl.ContentTemplate>
<DataTemplate>
<ListBox FontSize="16" ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:MyTabItem}}, Path=Products}" Visibility="Visible">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Code.MainGroup}"></TextBlock>
<TextBlock Text="{Binding Path=Code.MainForm}"></TextBlock>
<TextBlock Text="{Binding Path=Code.SubForm}"></TextBlock>
<TextBlock Text="{Binding Path=Code.Finishing}"></TextBlock>
<TextBlock Text="{Binding Path=Code.MaterialGroup}"></TextBlock>
<TextBlock Text="{Binding Path=Code.MaterialSort}"></TextBlock>
<TextBlock Text="{Binding Path=Code.Attest}"></TextBlock>
<TextBlock Text="{Binding Path=Code.Sizing}"></TextBlock>
<TextBlock Text="{Binding Path=Code.SubSizing}"></TextBlock>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
And declaration of MyTabItem class:
public class MyTabItem : TabItem
{
public List<Product> Products;
}
Now I have listboxes displayed in each of tab items, but they are empty

It's probably easier to bind directly to your product class and let the TabControl wrap each one in a TabItem.
foreach (var group in repository.Products)
{
TabControlProducts.Items.Add(group);
}
TabControlProducts.SelectedIndex = 0;
Then the xaml
<TabControl Grid.Row="1" Grid.Column="1" x:Name="TabControlProducts">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Header" Value="{Binding Key}"/>
</Style>
</TabControl.Resources>
<TabControl.ContentTemplate>
<DataTemplate>
<ListBox FontSize="16" ItemsSource="{Binding .}" Visibility="Visible">
itemtemplate here...
</ListBox>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>

How to change the Header image of TabItem through MouseOver?

I've a TabControl like this:
<TabControl>
<TabItem Header="playing" HorizontalAlignment="Left" Width="150" Tag="Tab1">
<TabItem.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" ToolTip="playing" />
<Image Margin="10,0,0,0" Source="/logo.png" Height="25"/>
</StackPanel>
</DataTemplate>
</TabItem.HeaderTemplate>
</TabItem>
...
In this TabControl I've three different TabItem, each tab item have a default image. My goal is to change the image TabItem where the user has positioned the mouse.
So in this case the TabItem 1 with ToolTip "playing" instead of logo.png should have logo2 when the mouse is over this tab item.
How can I do this?
Note: Please, note that I'm using mahapp, and I'm using a DataTemplate for keep the tooltip text without override the original style of mahapp tab item.

Try this:
XAML:
<Controls:MetroWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:local="clr-namespace:MahApps.Metro.Application21"
x:Class="MahApps.Metro.Application21.MainWindow"
BorderThickness="1"
BorderBrush="{DynamicResource AccentColorBrush}"
Icon="mahapps.metro.logo2.png"
Title="MainWindow"
Height="350"
Width="525">
<Controls:MetroWindow.Resources>
<DataTemplate x:Key="DataTemplate1">
<StackPanel x:Name="Panel1" Orientation="Horizontal">
<TextBlock Text="{Binding Text}" ToolTip="{Binding Text}" />
<Image x:Name="Image1" Source="{Binding Logo}" Margin="10,0,0,0" Height="25"/>
</StackPanel>
<DataTemplate.Triggers>
<Trigger SourceName="Panel1" Property="IsMouseOver" Value="true" >
<Setter TargetName="Image1" Property="Source" Value="logo4.png" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Controls:MetroWindow.Resources>
<Controls:MetroWindow.DataContext>
<local:MyViewModel/>
</Controls:MetroWindow.DataContext>
<Grid>
<TabControl ItemsSource="{Binding Data}" ItemTemplate="{StaticResource DataTemplate1}">
</TabControl>
</Grid>
ViewModel:
public class MyViewModel
{
public ObservableCollection<MyData> Data { get; set; }
public MyViewModel()
{
Data = new ObservableCollection<MyData>
{
new MyData {Logo = "logo1.png", Text = "playing 1" },
new MyData {Logo = "logo2.png", Text = "playing 2" },
new MyData {Logo = "logo3.png", Text = "playing 3" }
};
}
}

Combobox SelectedItem and Binding in UWP

Currently Developing an UWP Application having troubles with comboboxes.
I am binding an ObservableCollection to a combobox (it works)
var WarehouseList = new ObservableCollection<Warehouse>(taskmag.Result);
WarehouseBox.ItemsSource = WarehouseList;
What I would like to do is to show a selecteditem when I load data into my form.
I am not using MVVM and this is my Combox XAML
<ComboBox HorizontalAlignment="Stretch" Width="400" FontSize="32" Name="WarehouseBox" Margin="20,0,0,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding WarehouseID}" Name="MID" Visibility="Collapsed"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I have no idea where to start from as documentation always implies MVVM or some other thing I have not implemented.
I am willing to change my items coll to List or IEnumerable if it can help solve the issue.
Any help is greatly appreciated.

Here's the full thing, let me know if it still doesn't work for you:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ComboBox x:Name="ComboBoxWarehouses">
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<TextBlock Text="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid>
public MainPage()
{
this.InitializeComponent();
var items = new ObservableCollection<Warehouse>();
var item = new Warehouse() {Name = "selected"};
items.Add(new Warehouse() { Name = "not selected"});
items.Add(item);
items.Add(new Warehouse() { Name = "Another Not Selected"});
ComboBoxWarehouses.ItemsSource = items;
ComboBoxWarehouses.SelectedItem = item;
}

C# WPF - TransitioningContentControl with App.content

I Work with the theme of MahApps (Metro Dark) I looked the animations of this theme.
I came to a dead end: indeed I created a system to switch between different UserControl, that is to say that I have only one window and clicking on different buttons, I have this or such UserControl. But now I am with this system switch, I have no animation (only the start of the application).
How can I make an animation for each change in UserControl (Keeping Metro theme)?
Somebody ask me : use TransitioningContentControl
But i made my switcher like this :
class Switcher
{
public static UserControl WClient;
public static UserControl WHome;
public static UserControl WDataBase;
public Switcher()
{
WClient = new Windows.Client();
WHome = new Windows.Home();
WDataBase = new Windows.DataBase();
}
public static void currentWindow(UserControl window, string color)
{
Window curApp = Application.Current.MainWindow;
curApp.Content = window;
if (window == WClient)
{
curApp.Title = "CLIENT - INFO-TOOLS - BY NAOGRAFIX";
}
else if (window == WDataBase)
{
curApp.Title = "DATABASE - INFO-TOOLS - BY NAOGRAFIX";
}
else
{
curApp.Title = "HOME - INFO-TOOLS - BY NAOGRAFIX";
}
currentColor(color);
}
}
Now, when i clic on a button (to switch userControl) i use this :
private void BtnDataBase_Click(object sender, RoutedEventArgs e)
{
var color = "Red";
if (DataBase.isConnected) { color = "Green"; }
Switcher.currentWindow(Switcher.WDataBase, color);
}
I use CONTENT, i dont know if i can use TransitioningContentControl
Help :)
Nao*

You do need to use transitioning content control as you have said. You can add that as the direct content of the window then access it by name from the mainwindow and change its content instead.
Xaml
<metro:TransitioningContentControl x:Name="tContent"/>
C#
((ContentControl)curApp.FindName("tContent")).Content = window;
You will need the xml namespace definition
xmlns:metro="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
and you can change the transition using the Transition property on TransitioningContentControl

WPF XAML below shows use of MahApps.Metro TransitioningContentControl.
Click on the Content listbox to switch content.
Select the transition effect in the Transition listbox, then change selected Content to see the effect.
<Window x:Class="WpfMahApp.MainWindow"
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:mah="http://metro.mahapps.com/winfx/xaml/controls"
mc:Ignorable="d"
Title="MainWindow" Height="600" Width="800">
<Window.Resources>
<TextBlock x:Key="Content1" Width="400" Height="200" Text="Content 1: TextBox" Background="Aqua" />
<Canvas x:Key="Content2" Width="200" Height="400" Background="DarkOrange">
<Ellipse Fill="YellowGreen" Stroke="Black" Width="100" Height="200" />
<Label Content="Content2: Canvas" />
</Canvas>
<Border x:Key="Content3" Width="100" Height="100" Background="Yellow" BorderBrush="Blue" BorderThickness="2" CornerRadius="4">
<TextBlock Text="Content3: Border" />
</Border>
</Window.Resources>
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Vertical" >
<CheckBox Margin="4" Content="Is Transitioning" IsChecked="{Binding ElementName=TransitioningContentControl,Path=IsTransitioning , Mode=OneWay}" />
<StackPanel Orientation="Vertical" Margin="8">
<TextBlock Text="Content" FontWeight="Bold"/>
<ListBox Name="ContentSelection" HorizontalAlignment="Left">
<ListBoxItem Content="Content 1" Tag="{StaticResource Content1}" />
<ListBoxItem Content="Content 2" Tag="{StaticResource Content2}" />
<ListBoxItem Content="Content 3" Tag="{StaticResource Content3}" />
</ListBox>
</StackPanel>
<StackPanel Orientation="Vertical" Margin="8">
<TextBlock Text="Transition" FontWeight="Bold" />
<ListBox Name="Transition" HorizontalAlignment="Left">
<ListBoxItem Content="Default" Tag="{x:Static mah:TransitionType.Default}"/>
<ListBoxItem Content="Normal" Tag="{x:Static mah:TransitionType.Normal}"/>
<ListBoxItem Content="Up" Tag="{x:Static mah:TransitionType.Up}"/>
<ListBoxItem Content="Down" Tag="{x:Static mah:TransitionType.Down}"/>
<ListBoxItem Content="Left" Tag="{x:Static mah:TransitionType.Left}" />
<ListBoxItem Content="Right" Tag="{x:Static mah:TransitionType.Right}"/>
<ListBoxItem Content="LeftReplace" Tag="{x:Static mah:TransitionType.LeftReplace}"/>
<ListBoxItem Content="RightReplace" Tag="{x:Static mah:TransitionType.RightReplace}"/>
</ListBox>
</StackPanel>
</StackPanel>
<mah:TransitioningContentControl Margin="8"
Name="TransitioningContentControl"
Background="Beige" BorderBrush="Black" BorderThickness="1"
Content="{Binding ElementName=ContentSelection, Path=SelectedValue.Tag}"
Transition="{Binding ElementName=Transition, Path=SelectedValue.Tag}" />
</StackPanel>
</Window>

Pivot Control - issue with data binding

I've checked various examples of Pivots and think my implementation should work but it's having an issue.
Here is the XAML:
<controls:Pivot Title="Results" ItemsSource="{Binding baskets}">
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<Grid x:Name="grid">
<TextBlock Text="{Binding basketName}" />
</Grid>
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Vertical">
<TextBlock TextWrapping="Wrap" Text="{Binding basketItems.Count}"/>
</StackPanel>
</Grid>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
and the code-behind:
public ObservableCollection<Basket> baskets = new ObservableCollection<Basket>();
public pivotPage()
{
InitializeComponent();
//for testing purposes
baskets.Add(new Basket());
baskets.Add(new Basket());
}
The page renders blank, what am I doing wrong?

There is no indication in your code that you have set your DataContext. Try the following:
public ObservableCollection<Basket> baskets = new ObservableCollection<Basket>();
public pivotPage()
{
InitializeComponent();
this.DataContext = baskets;
//for testing purposes
baskets.Add(new Basket());
baskets.Add(new Basket());
}