modal window turned blurry with no apparent reason - wpf

I can't figure out why, but my modal window turned blurry. Have no idea of what is causing this and it's frustrating me at this point. I did not notice this (which i suppose i would have) at any time when working on it, and suddenly i was like, what in the name of god is this...
What is suprising is that it only happens in the modal, and not in the main window, so it must be something i changed. I've already checked i don't have a blurry effect on just in case i activated it unintendedly, and can't figure out what else can be causing this. The only effect i applied was a dropShadow, as you can see in the images.
Here is a picture of what it's looking like:
blurry modal
The quality of the picture doesnt seem to be good enough, but you can see anyway how the modal is much more blurry than the background (which is the main window).
As you can see in this other picture, in the design window it's not showing blurry, just in case this might help.
not blurry in design window
any idea of what might have caused this? thx
EDIT: By the way, the content you see in the first image, which is not in the design window, is put there programatically.
<Window x:Class="CholaYTD.WpfMBFin"
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:local="clr-namespace:CholaYTD"
mc:Ignorable="d"
Title="WpfMBFin" Height="275" Width="400" ResizeMode="NoResize" ShowInTaskbar="False" WindowStartupLocation="CenterScreen" WindowStyle="None" Background="{x:Null}" Foreground="#FFEBF3FA" AllowsTransparency="True" SnapsToDevicePixels="True">
<Border BorderThickness="1" BorderBrush="#000000" CornerRadius="25" Background="#2F3138" VerticalAlignment="Center" HorizontalAlignment="Center" >
<Border.Effect>
<DropShadowEffect Opacity="0.8"/>
</Border.Effect>
<DockPanel MinWidth="375" MinHeight="100" Height="250" HorizontalAlignment="Center" VerticalAlignment="Top">
<StackPanel DockPanel.Dock="Top" HorizontalAlignment="Center" VerticalAlignment="Top" >
<!-- Titulo -->
<Label Content="DESCARGAS FINALIZADAS" HorizontalAlignment="Center" Margin="0 15 0 0" Foreground="#FFEBF3FA" FontFamily="Berlin Sans FB"
FontSize="20" />
<!-- Descripcion -->
<Label Content="Las descargas finalizaron con éxito." HorizontalAlignment="Center" Margin="0 5 0 0" Foreground="#FFEBF3FA"
FontFamily="Berlin Sans FB" FontSize="16" />
<!-- Descripcion fallidas -->
<!--<Label Content="Las descargas finalizaron con éxito." HorizontalAlignment="Center" Margin="0 0 0 0"
Foreground="#FFEBF3FA" FontFamily="Berlin Sans FB" FontSize="16" />-->
<!-- Enlaces -->
<TextBlock Name="textBox_enlaces" HorizontalAlignment="Center" Margin="0 0 0 0" Foreground="#FFEBF3FA" FontFamily="Berlin Sans FB" FontSize="16" >
</TextBlock>
</StackPanel>
<!-- Boton OK -->
<StackPanel Name="stackPanelCerrar" DockPanel.Dock="Bottom" Height="35" Width="60" VerticalAlignment="Bottom" Margin="0 0 0 10">
<Border Name="borderCerrar" BorderThickness="1" BorderBrush="#000000" CornerRadius="15" Background="#9FBED1" MouseDown="Border_MouseDown" MouseEnter="Border_MouseEnter" MouseLeave="Border_MouseLeave" Cursor="Hand" >
<Label Name="labelCerrar" HorizontalAlignment="Center" VerticalAlignment="Bottom" FontFamily="Berlin Sans FB" FontSize="20" Foreground="#2F3138" >
OK
</Label>
</Border>
</StackPanel>
</DockPanel>
</Border>
public partial class WpfMBFin : Window
{
private List<string> listaEnlaces;
public WpfMBFin(List<string> failedList)
{
listaEnlaces = failedList;
InitializeComponent();
// declaramos la venata principal como padre de esta ventana
this.Owner = App.Current.MainWindow;
crearEnlaces();
}
private void crearEnlaces()
{
string youtubeURLStarting = "https://www.youtube.com/watch?v=";
string textoFinalEnlaces = "Sin embargo, ";
if (listaEnlaces.Count < 2)
{
textoFinalEnlaces += "el siguiente video no estaba disponible:\n";
Hyperlink hLink = new Hyperlink();
hLink.NavigateUri = new Uri(youtubeURLStarting + listaEnlaces.ElementAt(0));
hLink.RequestNavigate += new System.Windows.Navigation.RequestNavigateEventHandler(Hyperlink_RequestNavigate);
hLink.Inlines.Add(youtubeURLStarting + listaEnlaces.ElementAt(0));
textBox_enlaces.Inlines.Add(textoFinalEnlaces);
textBox_enlaces.Inlines.Add(hLink);
}
else
{
textoFinalEnlaces += "los siguientes videos no estaban disponibles:\n";
foreach (string link in listaEnlaces)
{
textoFinalEnlaces += "\n" + youtubeURLStarting + link;
}
}
}
// HANDLER de Hyperlinks
private void Hyperlink_RequestNavigate(object sender, System.Windows.Navigation.RequestNavigateEventArgs e)
{
System.Diagnostics.Process.Start(e.Uri.AbsoluteUri);
}
// EFECTO BOTON
private void Border_MouseDown(object sender, MouseButtonEventArgs e)
{
this.Close();
}
private void Border_MouseEnter(object sender, MouseEventArgs e)
{
stackPanelCerrar.Height = 36;
stackPanelCerrar.Width = 62;
borderCerrar.BorderBrush = (Brush)(new BrushConverter().ConvertFrom("#EBF3FA"));
borderCerrar.BorderThickness = (new Thickness(2, 2, 2, 2));
borderCerrar.Background = (Brush)(new BrushConverter().ConvertFrom("#EBF3FA"));
labelCerrar.Foreground = (Brush)(new BrushConverter().ConvertFrom("#2F3138"));
}
private void Border_MouseLeave(object sender, MouseEventArgs e)
{
stackPanelCerrar.Height = 35;
stackPanelCerrar.Width = 60;
borderCerrar.BorderBrush = Brushes.Black;
borderCerrar.BorderThickness = (new Thickness(1, 1, 1, 1));
borderCerrar.Background = (Brush)(new BrushConverter().ConvertFrom("#9FBED1"));
labelCerrar.Foreground = (Brush)(new BrushConverter().ConvertFrom("#2F3138"));
}
}

Related

UserControl child fill Window

I have a UserControl that is a portion of a wpf window.
<Window>
<Grid>
<!--some other display elements would be here-->
<local:MyUserControl x:Name="Foo" Padding="0,42,0,50"/>
</Grid>
</Window>
Inside MyUserControl I have an element that is a gallery that is normally hidden, but when visible, it should fill the entire screen.
<UserControl>
<Grid>
<!--main display elements would be here-->
<Grid Name="Gallery" Visibility="Hidden">
<Rectangle Fill="Black" Opacity="0.75"/>
<TextBlock Name="GalleryLabel" Foreground="White" TextAlignment="Center">Current Image Title</TextBlock>
<Button Name="CloseGallery" Style="{DynamicResource WhiteTextButton}" Margin="0,0,0,0" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Click="GalleryClose_OnClick">X</Button>
<Image Name="GalleryImage" Margin="25"/>
</Grid>
</Grid>
</UserControl>
How can I set the Gallery to fill the entire Window rather than just the UserControl?
I was able to get it to work by adding Margin="0,-42,0,-50" to Gallery, but I don't like that solution. I would rather do something that doesn't involve hard-coding values in the UserControl so that I would be able to have more flexiblility in using it.
Normally it looks like:
where the green Foo area is MyUserControl, and the rest of the things in the window are other elements.
At certain points, I have a gallery display an image, which should fill the entire screen like:
which should fill the entire screen and have a black opaque overlay, along with an image displayed on top of the overlay.
Remove the Padding...
You can use:
<local:MyUserControl x:Name="Foo" VerticalAlignment="Stretch" HorizontalAligment="Stretch"/>
EDIT
I may admit that I still am not sure what you want. But I made something which does the same as you showed in the pictures. But be aware that this as an opinion based question, and the answer is my opinion, there are a lot of ways to achieve this. And this is only one of them:
MainWindow
<Window x:Class="MyProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myProject="clr-namespace:MyProject"
Title="MainWindow" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Background="Gainsboro" Grid.Row="0">
<StackPanel Orientation="Horizontal">
<Button Content="Show gallery" Width="100" Margin="10"/>
<Button Content="Do something else" Width="150" Margin="10"/>
</StackPanel>
</Border>
<myProject:SomeOtherStuff Grid.Row="1" />
<Border Grid.Row="2" Background="Gainsboro">
<StackPanel Orientation="Horizontal">
<Label Content="Buttom area, can be used for something else"/>
</StackPanel>
</Border>
<myProject:GalleryUserControl x:Name="GalleryUserControl" Grid.Row="0" Grid.RowSpan="3" Visibility="Hidden"/>
</Grid>
SomeOtherStuff UserControl
<UserControl x:Class="MyProject.SomeOtherStuff"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid Background="Green">
<Label VerticalAlignment="Center" HorizontalAlignment="Center" Content="Foo" FontSize="30" FontFamily="Verdana"/>
</Grid>
Gallery UserControl
<UserControl x:Class="XamDataGrid.GalleryUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Height="500" Width="800">
<Grid Background="#99000000">
<TextBlock Text="Currect image title" Foreground="White" TextAlignment="Center" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<Button Name="CloseGallery" Margin="0,0,0,0" Content="X" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right" Width="25" Click="GalleryClose_OnClick"/>
<Image Margin="30"/>
</Grid>
An Adorner will be best for you. As it floats above everything else and remains outside the VisualTree too.
UserControl2
<UserControl2 ...>
<Grid>
<Grid Background="#FF709FA6" Opacity="0.3" Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}"
Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}">
</Grid>
<Grid Width="600" Height="700">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF37DAEA" Offset="0"/>
<GradientStop Color="#FFE84242" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<!-- Gallery controls -->
<Button Content="Welcome to Gallery" HorizontalAlignment="Left" IsHitTestVisible="True" Margin="112,126,0,0" VerticalAlignment="Top" Height="68" FontSize="48" Click="Button_Click_1"/>
<TextBlock HorizontalAlignment="Left" Margin="83,42,0,0" TextWrapping="Wrap" Text="UserControl2" VerticalAlignment="Top" Foreground="#FF1B0D0D"/>
</Grid>
</Grid>
</UserControl2>
UserControl1
Code :
public partial class UserControl1 : UserControl
{
public UserControl1()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
// get root Window
DependencyObject current = LogicalTreeHelper.GetParent(this);
while (!(current is Window))
current = LogicalTreeHelper.GetParent(current);
Window root = current as Window;
IEnumerable children = LogicalTreeHelper.GetChildren(root);
Panel p = null;
foreach (var child in children)
{
p = child as Panel; // get first container panel in Window
break;
}
// Create UserControl2 to add to the adorner
UserControl2 ctrlGallery = new UserControl2();
AdornerLayer layer = AdornerLayer.GetAdornerLayer(p);
GalleryAdorner adorner = new GalleryAdorner(p, ctrlGallery);
layer.Add(adorner);
}
}
public class GalleryAdorner : Adorner
{
private Control _child;
VisualCollection collection;
public GalleryAdorner(UIElement elem, Control child)
: base(elem)
{
collection = new VisualCollection(this);
_child = child;
collection.Add(_child);
}
protected override int VisualChildrenCount
{
get
{
return 1;
}
}
protected override Visual GetVisualChild(int index)
{
if (index != 0) throw new ArgumentOutOfRangeException();
return collection[0];
}
protected override Size MeasureOverride(Size constraint)
{
_child.Measure(constraint);
return _child.DesiredSize;
}
protected override Size ArrangeOverride(Size finalSize)
{
_child.Arrange(new Rect(new Point(0, 0), finalSize));
return new Size(_child.ActualWidth, _child.ActualHeight);
}
}

OOB Silverlight and content scale on window resize

Good morning,
I faced problem when doing scaleTransform on the content when OOB Silverlight application's window gets resized. The code looks very simple
xaml
<UserControl x:Class="SilverlightApplication1.MainPage"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="Aquamarine" RenderTransformOrigin="0,0">
<Rectangle Fill="Aqua" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Height="150">
<TextBlock FontSize="20" Text="Hello World" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Button Content="Button" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
</Grid>
</Grid>
</UserControl>
C#
public MainPage()
{
InitializeComponent();
SizeChanged += MainPage_SizeChanged;
}
void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
ScaleTransform scaleTransform = new ScaleTransform();
scaleTransform.ScaleX = (Application.Current.MainWindow.Width / 500f);
scaleTransform.ScaleY = (Application.Current.MainWindow.Height / 500f);
scaleTransform.CenterX = 0;
scaleTransform.CenterY = 0;
// this.RenderTransform doesn't work either.
LayoutRoot.RenderTransform = scaleTransform;
}
The content gets scaled when the main window is resized, but, for some reason, I see white background of the window when scaling down. It seems that the content is scaled down faster than window and I don't know what I am doing wrong. The code seems logical and should work, shouldn't it?
The LayoutTransformer saved my day. I have changed the code and xaml as follows and everything works now. Code may need a little tweaking though.
xaml
<UserControl x:Class="SilverlightApplication1.MainPage"
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:layout="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit"
mc:Ignorable="d"
d:DesignHeight="500" d:DesignWidth="500">
<layout:LayoutTransformer x:Name="LayoutTransformer">
<layout:LayoutTransformer.Content>
<Grid x:Name="LayoutRoot" Background="AntiqueWhite">
<Rectangle Fill="Aqua" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Grid VerticalAlignment="Center" HorizontalAlignment="Center" Height="150">
<TextBlock FontSize="20" Text="Hello World" Margin="5" VerticalAlignment="Top" HorizontalAlignment="Center"/>
<Button Content="Button" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
</Grid>
</Grid>
</layout:LayoutTransformer.Content>
<layout:LayoutTransformer.LayoutTransform>
<ScaleTransform x:Name="ContentScale" CenterX="0" CenterY="0" ScaleX="1" ScaleY="1" />
</layout:LayoutTransformer.LayoutTransform>
</layout:LayoutTransformer>
</UserControl>
C#
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
SizeChanged += MainPage_SizeChanged;
}
void MainPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
double yScale = ActualHeight / 500f;
double xScale = ActualWidth / 500f;
double value = GetScale(xScale, yScale);
ContentScale.ScaleX = value;
ContentScale.ScaleY = value;
LayoutTransformer.ApplyLayoutTransform();
}
private double GetScale(double xScale, double yScale)
{
return Math.Max(0.1, Math.Min(xScale, yScale));
}
}

Trigger a fade out animation when slider's value changes

I'm trying to bind the Opacity property of a Rectangle shape to the Slider's value. So that when its value passes 2, the Rectangle fades out and when we decrease the slider's value and it passes the value of 2 it appears again with a fade in animation. What's the best practice to do this?
<Window x:Class="Layout.AnimateOpacity"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="AnimateOpacity" Height="300" Width="300">
<DockPanel VerticalAlignment="Center" HorizontalAlignment="Center"
Height="300" Width="300">
<Canvas DockPanel.Dock="Top"
Width="300" Height="200"
Background="Black">
<Rectangle x:Name="myRectangle"
Width="100" Height="100"
Canvas.Left="100" Canvas.Top="60"
Fill="Yellow">
</Rectangle>
</Canvas>
<Slider x:Name="mySlider" DockPanel.Dock="Bottom"
Height="30" Width="250"
Value="1" Maximum="3" Minimum="0" />
</DockPanel>
</Window>
Hook ValueChanged event of slider and there you can do animation based on new and old value of slider.
XAML:
<Slider x:Name="mySlider" DockPanel.Dock="Bottom"
Height="30" Width="250"
Value="1" Maximum="3" Minimum="0"
ValueChanged="mySlider_ValueChanged" />
Code behind:
private void mySlider_ValueChanged(object sender,
RoutedPropertyChangedEventArgs<double> e)
{
if (e.NewValue > 2 && e.OldValue <= 2)
{
DoubleAnimation fadeOutAnimation = new DoubleAnimation(0.0,
new Duration(TimeSpan.FromSeconds(1)));
myRectangle.BeginAnimation(Rectangle.OpacityProperty, fadeOutAnimation);
}
else if(e.NewValue < 2 && e.OldValue >= 2)
{
DoubleAnimation fadeInAnimation = new DoubleAnimation(1.0,
new Duration(TimeSpan.FromSeconds(1)));
myRectangle.BeginAnimation(Rectangle.OpacityProperty, fadeInAnimation);
}
}

Animate control with respecting parents/container

I have a control that I move with help of animation from the bottom to the final position. My problem is now that I want to change the behaviour of the animation, so that it respects the outer container (DarkGray).
The orange Ractangle should only be visible on the white background and not on the darkgray Grid!
Code:
MainWindow.xaml:
<Grid Background="DarkGray">
<Grid Margin="50"
Background="White">
<Rectangle x:Name="objectToMove"
VerticalAlignment="Bottom"
Fill="Orange"
Height="50"
Width="50"/>
<Button Height="20"
Width="40"
Margin="20"
Content="Move"
Click="Button_Click"
VerticalAlignment="Top"/>
</Grid>
</Grid>
MainWindow.xaml.cs:
private void Button_Click(object sender, RoutedEventArgs e)
{
var target = objectToMove;
var heightOfControl = target.ActualHeight;
var trans = new TranslateTransform();
target.RenderTransform = trans;
var myAnimation = new DoubleAnimation(heightOfControl, 0, TimeSpan.FromMilliseconds(600));
trans.BeginAnimation(TranslateTransform.YProperty, myAnimation);
}
Current:
Desired solution:
Use ClipToBounds Property for this.
<Grid Margin="50"
Background="White"
ClipToBounds="True">

How to access Button programatically if the button is inside using C#

I have few questions as I am usign XAML for the first time.
How do I use the button (BrowseButton) to browse a folder in Harddrive ?
In this case as the button is inside
Can I use the way I have shown below?
Actually first dockpanel will hold the image and some label and the other dockpanel will have tabcontrol in it.
If I have a tabcontrol, How can I add a listview which can increase the tabs during runtime.. and the listview should be available in the runtime also.
How to add a close("X") mark on the top of the tab to close the button
probably I asked a lot of questions, sorry :(
Please help
<Grid>
<DockPanel>
<StackPanel>
<Image Name="imgClientPhoto" HorizontalAlignment="Left" VerticalAlignment="Top" Width="auto" Height="auto" Grid.Column="0" Grid.Row="0" Margin="0"
Source="D:ehtmp_top_left.gif" MinWidth="450" MinHeight="100" Grid.IsSharedSizeScope="True">
</Image>
<Button x:Name="BrowseButton" Margin="0,13.638,30,14.362" Content="Browse" Click="BrowseButton_Click" HorizontalAlignment="Right" Width="111" />
<TextBox x:Name="txtBxBrowseTB" Margin="46,10,146,10" Text="TextBox" TextWrapping="Wrap" TextChanged="BrowseTB_TextChanged"></TextBox>
<Label HorizontalAlignment="Left" Margin="-14,22,0,10" Name="label1" Width="69.75" FontSize="13" VerticalContentAlignment="Top" HorizontalContentAlignment="Center">Path:</Label>
</Grid>
</GroupBox>
</Grid>
</StackPanel>
</DockPanel>
<DockPanel>
<StackPanel Margin="0,158,0,0" HorizontalAlignment="Left" Width="330" Height="557.5" VerticalAlignment="Top">
<TextBox Height="50" Name="textBox1" Width="240" Margin="0,35,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Right" />
<ListBox Height="470" Name="listBox1" Width="332" Background="LightGray" Margin="0,0,0,0" BorderBrush="IndianRed" BorderThickness="3" />
</StackPanel>
<TabControl Height="234" Name="tabControl1" Width="1035" Margin="0,0,0,0">
<TabItem Header="tabItem1" Name="tabItem1">
<Grid Height="144" />
</TabItem>
</TabControl>
</DockPanel>
</Grid>
1) The browse code should be something like this:
private void BrowseButton_Click(object sender, RoutedEventArgs e)
{
System.Windows.Forms.FolderBrowserDialog browse = new System.Windows.Forms.FolderBrowserDialog();
browse.RootFolder= Environment.SpecialFolder.MyDocuments;
browse.SelectedPath = "C:\\InitalFolder\\SomeFolder";
if (browse.ShowDialog() == System.Windows.Forms.DialogResult.OK)
{
txtBxBrowseTB.Text = browse.SelectedPath;
}
}
2) I have tried to simplify the xaml. Does this look like something you could go with?:
<Grid>
<Image Name="imgClientPhoto" Margin="0" Height="262" VerticalAlignment="Top" HorizontalAlignment="Left" ></Image>
<StackPanel VerticalAlignment="Stretch" >
<StackPanel VerticalAlignment="Top" Orientation="Horizontal" Height="30">
<Button Name="BrowseButton" Content="Browse" Click="BrowseButton_Click" HorizontalAlignment="Right" Width="111" />
<Label Name="label1" Width="69.75" FontSize="13" VerticalContentAlignment="Center" HorizontalContentAlignment="Right">Path:</Label>
<TextBox Name="txtBxBrowseTB" Width="200" Text="TextBox" VerticalContentAlignment="Center" TextWrapping="Wrap" TextChanged="BrowseTB_TextChanged"></TextBox>
</StackPanel>
<StackPanel>
<StackPanel Orientation="Vertical">
<TextBox Height="50" Name="textBox1" />
<ListBox Height="470" Name="listBox1" Background="LightGray" Margin="0,0,0,0" BorderBrush="IndianRed" BorderThickness="3" MouseLeftButtonUp="listBox1_MouseLeftButtonUp">
<ListBoxItem>User1</ListBoxItem>
<ListBoxItem>User2</ListBoxItem>
<ListBoxItem>User3</ListBoxItem>
<ListBoxItem>User4</ListBoxItem>
</ListBox>
</StackPanel>
<TabControl Name="tabControl1" />
</StackPanel>
</StackPanel>
</Grid>
You can also have a close button in the tab item Header. As many of the content properties in xaml controls, the content can actually be controls, and not necessary just a text.
<TabControl Name="tabControl1" >
<TabItem Name="tabItem1" >
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<Label>TabHeader1</Label>
<Button Height="20" Width="20" FontWeight="Bold" Click="CloseTabButton_Click">X</Button>
</StackPanel>
</TabItem.Header>
<Grid Height="144">
<ListView />
</Grid>
</TabItem>
</TabControl>
3) Here is how you would add the tabs in C# dynamically:
private void listBox1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
//Get selected item
ListBoxItem item = (ListBoxItem)listBox1.SelectedItem;
string itemText = item.Content.ToString();
//Check if item is already added
foreach (TabItem tItem in tabControl1.Items)
{
if ((string)tItem.Tag == itemText)
{
//Item already added, just activate the tab
tabControl1.SelectedItem = tItem;
return;
}
}
//Build new tab item
TabItem tabItem = new TabItem();
tabItem.Tag = itemText;
//First build the Header content
Label label = new Label();
Button button = new Button();
label.Content = itemText;
button.Content = "X";
button.Height = 20;
button.Width = 20;
button.FontWeight = FontWeights.Bold;
button.Click += CloseTabButton_Click; //Attach the event click method
button.Tag = tabItem; //Reference to the tab item to close in CloseTabButton_Click
StackPanel panel = new StackPanel();
panel.Orientation = Orientation.Horizontal;
panel.Children.Add(label);
panel.Children.Add(button);
tabItem.Header = panel;
//Then build the actual tab content
//If you need only the ListView in here, you don't need a grid
ListView listView = new ListView();
//TODO: Populate the listView with what you need
tabItem.Content = listView;
//Add the finished tabItem to your TabControl
tabControl1.Items.Add(tabItem);
tabControl1.SelectedItem = tabItem; //Activate the tab
}
private void CloseTabButton_Click(object sender, RoutedEventArgs e)
{
//The tab item was set to button.Tag when it was added
Button button = (Button)sender;
TabItem tabItem = (TabItem)button.Tag;
if (tabItem != null)
{
button.Click -= CloseTabButton_Click; //Detach event handler to prevent memory leak
tabControl1.Items.Remove(tabItem);
}
}

Resources