WPF Custom TabItem - Controls not displayed in Visual Studio Designer - c#

I created a custom TabItem with a DockPanel and a Button in it.
XAML:
<TabItem
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" x:Class="MovieDB.UI.UserControlls.SearchTab" d:DesignWidth="500.038" d:DesignHeight="309.055">
<DockPanel Background="#FFE5E5E5">
<Button x:Name="button" Content="Button" Height="100" Width="75" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</DockPanel>
</TabItem>
C#:
namespace MovieDB.UI.UserControlls
{
/// <summary>
/// Interaktionslogik für SearchTab.xaml
/// </summary>
public partial class SearchTab : TabItem
{
private SearchContainer<SearchMovie> results;
public SearchTab()
{
InitializeComponent();
this.Header = "Suche";
}
public SearchTab(SearchContainer<SearchMovie> results):this()
{
this.updateSearch(results);
}
public void updateSearch(SearchContainer<SearchMovie> results)
{
clear();
if(results.TotalResults == 0)
{
}
else
{
this.results = results;
Debug.WriteLine("Results: " + results.Results.Count());
}
}
private void clear()
{
}
}
}
If launch my program the button is displayed (Screenshot 2). But the button and i guess the panel itselve does noch show up in the Visual Studio 2015 Designer (Screenshot 1).
Where is the Problem?

If you put the TabItem in a TabControl it works fine.I think that's the Problem.
The designer needs a navigation control like TabControl,Window Page etc. as root.
<TabControl x:Class="CustomControls.tab"
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"
mc:Ignorable="d"
d:DesignWidth="500.038" d:DesignHeight="309.055">
<TabItem>
<DockPanel Background="#FFE5E5E5">
<Button x:Name="button" Content="Button" Height="100" Width="75" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</DockPanel>
</TabItem>
</TabControl>

What you did should work. But it doesn't, and I'll later try to show why.
But first, my workaround:
open designer, and right-click on it,
select: Edit Additional Templates, then Edit Generated Content, then Create Empty... Give your new DataTemplate a name, say 'DataTemplate1'
Designer will generate some code - an empty DataTemplate with a key DataTemplate1, and it will add your to TabItem the ContentTemplate attribute, with DataTemplate1 assigned to it (by DynamicResource).
Now move the content of your TabItem to the DataTemplate1. The designer should correctly display your layout.
If you close and reopen your SearchTab control, you'll find that you can't see the content again. To have it back right click on the designer, select Edit Additional Template, then Edit Generated Content, then Edit Current.
Why the designer couldn't load your SearchTab? If you right-click on the designer and select Edit Template, then Edit a Copy... you'll have TabItem style generated. The header of the TabItem is displayed by the ContentPresenter, while the TabItem's content must by displayed inside the innerBorder Border. This border has Opacity set to zero, and it's being changed to 1 by MultiTriggers, which are dependent on the TabControl. The TabControl in your case doesn't exist, so all the bindings are broken. Which suggests, that changing a default Style for 'TabItem', would also solve your problem.

Although I do not have my dev machine to work with, I can only offer a suggestion. For whatever you want on your tab item control, why not put all your controls in a custom user control or grid with the premise that you KNOW you will be adding it to tab control that is dynamically added to your tab page.
The tab item needs its proper parent tab control to render it in the designer. But if you build everything as a standard control make it look and operate as you expect.
Then at run-time, add your tab item, then add the custom control to your dynamically added tab item and see if that works for you. You apparently have all the other components / processes working. Even if your sample control was just a label, textbox or something similar.

Related

wpf Load page into the <grid> on button click

i have this code but i want to load frame from xaml.cs because changeing combobox item i want to load different pages. i know how to load page on grid but if i make this i cant change pages whenever combobox item changed
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="822.702" Width="805.597">
<StackPanel >
<Grid>
//there is some text labels
</Grid>
<Grid heigt="150" margin="0,450,0,0">
<Frame Source="page1.xaml"></Frame>
</Grid>
</StackPanel>
if i make this page1 will be loaded on grid but
if i give some name like GRD1
<Grid heigt="150" margin="0,450,0,0" x:name="GRD1">
</Grid>
and if I want to define the frame source in xaml.cs using c# how can I define this function
<Frame Source="page1.xaml"></Frame>
I know that I ask a particular question but I need that the pages in grid can be variable every time combobox changes value. thank !!!!
i find the best way for load
<Grid>
<Frame x:name="load_frame"/>
</Grid>
this is what to do on xaml
and then on button click or combobox value change or what you want you can load any page like this
private void Button_Click(object sender, RoutedEventArgs e)
{
load_frame.Content = new ANYPAGEYOUWANT();
}
I am writing this answer because I have seen that many people are trying to load page manually
thank you Jonathan Perennes
PS. I Forgot if you don't want to show navigatebar you must add
<Frame x:Name="load_frame" NavigationUIVisibility="Hidden"/>
If you want display specific view based on some criteria (selected item of a combobox for your case), i recommand you to use ContentControl and DataTemplateSelector
Edit : Pseudo code
In your window ressource create datatemplate based on the different views you want to display :
<DataTemplate x:Key="page1View">
<Views:page1/>
</DataTemplate>
<DataTemplate x:Key="page2View">
<Views:page2/>
</DataTemplate>
Then create a datatemplate selector that derivate from the datatemplate selector class : Exemple of implementation
In the datatemplate selector's SelectTemplate method you can return the good datatemplate either by using "FindResource" methods or by creating datatemplate properties in your datatemplateselector class and link them to your datatemplate declared in the xaml
Than add it in your window ressources :
<local:MyDataTemplateSelector x:Key="MyDataTemplateSelector" />
Then use a contentcontrol that will display the right view based on your combobox selected item by using the template selector
<ContentControl Content="{Binding ComboboxSelectedItem}" ContentTemplateSelector="{StaticResource MyDataTemplateSelector }"/>

MVVM - Add a Existing User Control in Grid(XAML)

I am developing a Windows 8.1 apps,
and i am following MVVM Pattern
I have a Grid in the Application
<Grid Name="g1">
in which in need to add a existing User Control.
<UserControl
x:Class="CaptureApp.UIComponents.PlayVideo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CaptureApp.UIComponents"
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>
<MediaElement Name="MediaPlay" >
</MediaElement>
</Grid>
</UserControl>
Since View (XAML) is not allowed to know the Control.
What will be the correct way to implement it??
the wordpress blog in the comments uses a datatrigger, which isn't present in windows store apps.
if I understand your question correctly, you're trying to have a view within your grid that is conditionally loaded, so that when there is no data for the user control, it is not rendered in the grid?
you could accomplish this by using a
<ContentControl Content="{Binding PropertyOnViewModel}" ContentTemplateSelector="{StaticResource SomeContentTemplateSelector}" />.
public class SomeContentTemplateSelector : DataTemplateSelector
{
public DataTemplate SomeTemplate {get;set;}
protected override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item is null)
return null;
return SomeTemplate;
}
}
and then in a DataTemplate, have your UserControl as a child. This will display nothing when there is no Content bound to the ContentControl, and will otherwise display the supplied DataTemplate. You will need to have a property in the over-arching ViewModel that contains the content for this ContentControl, though, just fyi.
edit: if you're adding multiple items dynamically, then you will want an ObservableCollection<> property on your ViewModel, and use an ItemsControl instead of a ContentControl.

Open WPF form from a VSTO outlook addin

I have this code in Thisaddin.cs
public void Search(string input)
{
ServerList listofservers = new ServerList();
listofservers.Visibility;
}
the ServerList is a simple WPF form with listbox thats it but how to display the listofservers?
I can't find the listofserver.show();
So first of all there is no item called WPF Form, there is only User Control for WPF. So once the WPF UserControl is created in the XAML you notice that this is the code
<UserControl x:Class="SQL_openertak2.ServerList"
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"
mc:Ignorable="d" d:DesignHeight="454" d:DesignWidth="259" SizeToContent="WidthAndHeight">
<Grid>
<ListBox Height="410" HorizontalAlignment="Left" Margin="12,12,0,0" Name="listBox1" VerticalAlignment="Top" Width="242" />
<Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,427,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
</Grid>
</UserControl>
So i have looked thru the XAML code. So as you can see that the whole thing is USERCONTROL
you have to change it to WINDOW then you will be able to see the .Show()
But take note that you also have to change the code in the xaml.cs
cause it will be like this by default
public partial class ServerList : UserControl
Change it to
public partial class ServerList : Window
well for obvious reasons!! :)
you can also host it in a layout panel, like:
Open Form1 in the Windows Forms Designer.
In the Toolbox, drag a TableLayoutPanel control onto the for
On the TableLayoutPanel control's smart tag panel, select Remove Last Row.
Resize the TableLayoutPanel control to a larger width and height.
In the Toolbox, double-click UserControl1 to create an instance of UserControl1 in the first cell of the TableLayoutPanel control.
The instance of UserControl1 is hosted in a new ElementHost control named elementHost1.
In the Toolbox, double-click UserControl1 to create another instance in the second cell of the TableLayoutPanel control.
In the Document Outline window, select tableLayoutPanel1. For more information, see Document Outline Window.
In the Properties window, set the value of the Padding property to 10, 10, 10, 10.
Both ElementHost controls are resized to fit into the new layout.
Change UserControl with Window as already answered in XAML and c# class.
Keep in mind that in VSTO applications, which are normally based on Windows Forms, it is important to remember to add System.XAML to references, otherwise you will probably get errors composing your forms layouts.
This could happen in VS2015 as I recently experienced, where the wizard procedure did not work as expected, missing to update class references.
Here some references: The type 'Window' does not support direct content

Attach a single close button on the tabcontrol in C#

How i can attach a single close button on the tabcontrol in C#.
There is a many way to attach a close button individually on each tabpages but I want to attach only single(e.g.) we can see on microsoft visual stdio 2008.
So Plz help me.
Here is a cheap way to do it, which might get you started:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<DockPanel>
<TabControl DockPanel.Dock="Top">
<TabItem Header="Test1" />
<TabItem Header="Test2" />
<TabItem Header="Test3" />
<TabItem Focusable="False">
<TabItem.Header>
<Button Command="{Binding CloseTab}" Content="X" Width="21" HorizontalAlignment="Stretch" />
</TabItem.Header>
</TabItem>
</TabControl>
</DockPanel>
</Window>
You then are left to implement a public ICommand CloseTab field or property on your DataContext, and style the tab control to your liking.
Edit:
If you use this method:
Wiring up the button is tricky. You have to be careful not to close the tab that contains the button
This isn't well adapted to dynamically created tabs, because you have to ensure the close button is appended to the list
You have to figure out how to re-select the last selected tab, when you close the selected tab
You'll also have weird behavior when tabs start to wrap
The tab-stop behavior is hard to get right. You can't make the last TabItem focusable, since focus is used to determine what to close, but tabbing to the close button breaks the normal TabItem keyboard flow
I have come up with a style that makes the button look like a regular tab, with a bold X on it, which makes it visually more like IE8, and fixes the keyboard selection problem. But it is complicated, and this solution is complicated enough.
Ultimately, a close button on every tab jives better with the tab control's default behavior. The only problem with that solution is that it takes up more space. You could cheat and make the close button collapse until you mouse over the tab item, though that's sort of a user-experience no-no, unless you just shrink it.
If you are serious about following through with the separate close button, I suggest you look at this article, and adapt what they do for the scroll buttons to your close button:
http://www.blogs.intuidev.com/post/2010/02/10/TabControlStyling_PartThree.aspx
Ignore what they do for close buttons :)
Would it be possible to have your tabcontrol on another container control and let that control's close button do the job?

C# User Control that can contain other Controls (when using it)

I found something about this issue for ASP, but it didn't help me much ...
What I'd like to do is the following: I want to create a user control that has a collection as property and buttons to navigate through this collection. I want to be able to bind this user control to a collection and display different controls on it (containing data from that collection).
Like what you had in MS Access on the lower edge of a form ...
to be more precise:
When I actually use the control in my application (after I created it), I want to be able to add multiple controls to it (textboxes, labels etc) between the <myControly> and </mycontrol>
If I do that now, the controls on my user control disappear.
Here is an example of one way to do what you want:
First, the code - UserControl1.xaml.cs
public partial class UserControl1 : UserControl
{
public static readonly DependencyProperty MyContentProperty =
DependencyProperty.Register("MyContent", typeof(object), typeof(UserControl1));
public UserControl1()
{
InitializeComponent();
}
public object MyContent
{
get { return GetValue(MyContentProperty); }
set { SetValue(MyContentProperty, value); }
}
}
And the user control's XAML - UserControl1.xaml
<UserControl x:Class="InCtrl.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300" Name="MyCtrl">
<StackPanel>
<Button Content="Up"/>
<ContentPresenter Content="{Binding ElementName=MyCtrl, Path=MyContent}"/>
<Button Content="Down"/>
</StackPanel>
</UserControl>
And finally, the xaml to use our wonderful new control:
<Window x:Class="InCtrl.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:me="clr-namespace:InCtrl"
Title="Window1" Height="300" Width="300">
<Grid>
<me:UserControl1>
<me:UserControl1.MyContent>
<Button Content="Middle"/>
</me:UserControl1.MyContent>
</me:UserControl1>
</Grid>
</Window>
I'm having a hard time understanding your question, but I think what you're describing is an ItemsControl using DataTemplates to display the contents of (presumably) an ObservableCollection(T).
A UserControl may not be the best way to do this. You're wanting to add decorations around content, which is basically what Border does: it has a child element, and it adds its own stuff around the edges.
Look into the Decorator class, which Border descends from. If you make your own Border descendant, you should be easily able to do what you want. However, I believe this would require writing code, not XAML.
You might still want to make a UserControl to wrap the buttons at the bottom, just so you can use the visual designer for part of the process. But Decorator would be a good way to glue the pieces together and allow for user-definable content.
Here's a link to a built-in control (HeaderedContentControl) that does the same thing as the accepted answer except that it is an existing control in WPF since .Net 3.0

Categories

Resources