XAML - The property 'Content' is set more than once - wpf

Very new to WPF and XAML. I can't get my head around why I can't place a WPF control where I would like in the following code. My issue is where the <canvas></canvas> tags are. Anything I put in this place gives me 'The property 'Content' is set more than once'
If anyone could explain in simple terms where the Content property is set that would be most helpful.
I have checked out the following articles to no avail:
the property 'Content' is set more than once
the property content is set more than once
Property content is set more than once
The property 'Content' is set more than once Button WPF
ControlTemplate causeing error "The property 'content' is set more than once"
<Window x:Class="PDFIndexer.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">
<Grid x:Name="ParentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1*" />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Menu Grid.Row="0" >
<MenuItem Header="File" >
<MenuItem Header="Open Project" Click="MenuItem_Click_1"></MenuItem>
<MenuItem Header="Save Project"></MenuItem>
<MenuItem Header="Close Project"></MenuItem>
<Separator></Separator>
<MenuItem Header="Exit"></MenuItem>
</MenuItem>
<MenuItem Header="Edit"></MenuItem>
</Menu>
<TabControl Grid.Row="1">
<TabItem Header="Document Flow" >
This is where the outline of the entire document will be placed.
<Canvas></Canvas>
</TabItem>
<TabItem Header="Preview">
This is where the preview will be drawn to screen.
</TabItem>
<TabItem Header="Resources">
This is where the resources { graphic files, fonts, data files }
</TabItem>
<TabItem Header="Code Library">
This is where the user can save re-usable bits of code. Useful when adding intel barcodes or Address blocks etc...
</TabItem>
</TabControl>
<StatusBar Grid.Row="2">
Items
</StatusBar>
</Grid>

By adding your text description to your TabItem you added Content then when you added the Canvas you added an additional item of Content which is not allowed for the TabItem. You need to use a Control that can hold a collection of Children such as Canvas, Grid, StackPanel etc. Try something like this.
<TabControl Grid.Row="1">
<TabItem Header="Document Flow">
<Canvas>
<TextBlock>
This is where the outline of the entire document will be placed.
</TextBlock>
</Canvas>
</TabItem>
<TabItem Header="Preview">
This is where the preview will be drawn to screen.
</TabItem>
<TabItem Header="Resources">
This is where the resources { graphic files, fonts, data files }
</TabItem>
<TabItem Header="Code Library">
This is where the user can save re-usable bits of code. Useful when adding intel barcodes or Address blocks etc...
</TabItem>
</TabControl>

Certain containers only allow 1 element, other containers allow >1 element.
When you get the error message 'Content' is set more than once, it means you have tried to put more than one type of element in a container that only allows 1 element.
Maybe try this (not tested):
<TabItem Header="Document Flow" >
<StackPanel>
<TextBlock>This is where the outline of the entire document will be placed. </TextBlock>
<Canvas></Canvas>
</StackPanel>
</TabItem>

Try to wrap a content of TabItem in a Grid and use TextBlock to show text:
<TabItem Header="Document Flow" >
<Grid>
<TextBlock Text="This is where the outline of the entire document will be placed."/>
<Canvas></Canvas>
</Grid>
</TabItem>

Related

MahApps.Metro AnimatedSingleRowTabControl doesn't work

For some reason my Tab Control doesn't seem to work as described.
Instead of seeing this (From Mahapps site)
I see this
I have tried fiddling with every single property to try to get the scroll bar to go away and to have left/right scroll buttons as shown in the example, but absolutely nothing works.
What am I missing?
EDIT: - Added my XAML
<Controls:MetroAnimatedSingleRowTabControl Controls:TabControlHelper.IsUnderlined="True" Margin="5" ScrollViewer.PanningMode="Both" ScrollViewer.CanContentScroll="False" ScrollViewer.HorizontalScrollBarVisibility="Hidden">
<Controls:MetroTabItem Header="Thread Image Download">
</Controls:MetroTabItem>
<Controls:MetroTabItem Header="Random Board Stats">
</Controls:MetroTabItem>
</Controls:MetroAnimatedSingleRowTabControl>
It doesn't exist a style key for this TabControl. So you must add the resource dictionary to the place where you need it. So MahApps should solve this in the next releases (site note for me).
<Grid>
<Grid.Resources>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedSingleRowTabControl.xaml" />
</Grid.Resources>
<TabControl>
<TabItem Header="this tabcontrols tabs">
<TextBlock FontSize="30" Text="Content" />
</TabItem>
<TabItem Header="appear only on a single line">
<TextBlock FontSize="30" Text="Content" />
</TabItem>
<TabItem Header="if they are overflowing">
<TextBlock FontSize="30" Text="Content" />
</TabItem>
<TabItem Header="instead of wrapping them">
<TextBlock FontSize="30" Text="Content" />
</TabItem>
</TabControl>
</Grid>
Hope this helps.

TabControl: all TabItems collapsed, but content of 1st TabItem still visible

I've got a rather strange behavior on a TabControl, whose TabItems are all collapsed: The content of the first TabItem is still visible (but the header is not).
The TabControl and its TabItems are setup like this:
<TabControl>
<TabItem Header="Data 1"
Visibility="{Binding Path=DataTable1.HasRows,
Converter={StaticResource BoolToVisibility}}">
<UI:ShowData DataContext="{Binding Path=DataTable1}"/>
</TabItem>
<TabItem Header="Data 2"
Visibility="{Binding Path=DataTable2.HasRows,
Converter={StaticResource BoolToVisibility}}">
<UI:ShowData DataContext="{Binding Path=DataTable2}"/>
</TabItem>
</TabControl>
If none of the data tables contains any rows, none of the TabItems should be shown. (I known that I could hide the whole TabControl in that case, but that's not the point here.)
Actually the content of the tab item "Header 1" will be displayed despite the TabItem being collapsed! The TabItem's header itself is collapsed, the TabItems border which contains its content and the content itself are displayed.
Edit/Add:
This can easily be reproduced using this code (note using Collapsed or Hidden does not make any difference:
<TabControl>
<TabItem Header="Test 1" Visibility="Hidden">
<Label>Test1</Label>
</TabItem>
<TabItem Header="Test 2" Visibility="Hidden">
<Label>Test2</Label>
</TabItem>
</TabControl>
So what's wrong here? Any help/hints are appreciated!
Ok, so you've found a real problem here... I looked around online and found several posts that relate to this. Some say that this is a bug, while others say that it is the designed behaviour. don't know which, although it certainly seems to be more of a bug than a feature.
Either way, you want to know how to deal with the problem. .. there are several solutions. One is just to set the TabItem.Content to null whenever you want to hide the tab and another is another involves adding an empty TabItem and selecting that item before hiding (so that it's empty content is shown).
You can attach a handler to the TabItem.IsVisibleChanged Event to be notified when the Visibility property has been changed:
public void TabItemIsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
{
// Hide TabItem.Content here
}
Here are some links to the relevant posts:
Bug in TabControl/TabItem`s content visibility?
WPF TabControl - Select different tab when TabItem Visibility changes
Is there a workaround for this tabcontrol/tabitem bug
Another solution that I prefer over the ones suggested: Bind the visibility of the TabItem and its content to the same property (using the BooleanToVisibilityConverter).
Here's a simple example:
<UserControl.Resources >
<BooleanToVisibilityConverter x:Key="boolToVis"/>
</UserControl.Resources>
<Grid>
<TabControl>
<TabItem Header="TabItem 1" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}">
<Label Content="Content 1" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}"/>
</TabItem>
<TabItem Header="TabItem 2" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}">
<Label Content="Content 2" Visibility="{Binding Item1Visibility, Converter={StaticResource boolToVis}}"/>
</TabItem>
</TabControl>
</Grid>
Could be a WPF bug, anyway bypass by binding the content visibility to the tab item visibility.
<TabControl>
<TabItem x:Name="_test1Tab" Header="Test 1" Visibility="Hidden">
<Label Visibility="{Binding ElementName=_test1Tab, Path=Visibility}">Test1</Label>
</TabItem>
<TabItem x:Name="_test2Tab" Header="Test 2" Visibility="Hidden">
<Label Visibility="{Binding ElementName=_test1Tab, Path=Visibility}">Test2</Label>
</TabItem>
</TabControl>
My solution to this was to put the TabItem I wanted to hide in another position. The problem happens only if you want to collapse only the first TabItem.

Scrollbar of a webbrowser control doesn't work correctly if enclosed in a tabcontrol

I have a program that has use of a webbrowser control. When enclosed in the main grid something like this:
<grid>
<WebBrowser x:Name="webBrowser" .../>
</grid>
The scrollbars work like they should, it goes to the extremes of the page.
however in if i want to put the webbrowser control in a tabcontrol, say because i wanted a tabbed browser, with the code like this
<grid>
<tabcontrol ...>
<tabitem ... >
<grid....>
<webBrowser x:Name="webBrowser1" />
</grid>
</tabitem>
</grid>
The scrollbars of the webbrowser control are not scrolling to the ends of the page, instead it it stops about 10% from the end horizontally and vertically.
Is there a way to get s tabbed browsercontrol that doesn't truncate the page?
Here is the more detailed code
<tabcontrol Height="500" HorizontalAlignment="Left" Margin="0,272,0,0" Name="tabControl1" VerticalAlignment="Top" Width=1000>
<Tabitem Header="FlexWebApp" Name="FWA" scrollViewer.VerticalSchollBarVisibility="Auto">
<grid Schrollviewer.VerticalScrollbarvisibility="hidden" name="FWAGrid>
<WebBrowser Name="WFWA" Source="pathToApplication"/>
</Grid>
</TabItem>
<TabItem header= AnalyseFWA Name="AFWA ...>
<Tabitem Header="SLWebApp" Name="SLA" scrollViewer.VerticalSchollBarVisibility="Auto">
<grid Schrollviewer.VerticalScrollbarvisibility="hidden" name="SLAGrid>
<WebBrowser Name="WSLA" Source="pathToApplication"/>
<TabItem header= AnalyseSLA Name="ASLA ...>
</Grid>
</TabItem>
So if it's not apparent the webbrowsers are directed to one silverlight app and one flex app both apps get truncated. In fact on both cases, the grid that encloses the apps' scrollbar is always visible despite the hidden attribute.
The truncation does not occur on regular browsers.
Could it be that the apps are misreporting its size?
Can you post more of your XAML?
I couldn't duplicate your issue. I created a new WPF Application project in Visual Studio 2010 and changed only the XAML and I did not have this issue.
<Window x:Class="TestBrowser.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">
<Grid>
<TabControl>
<TabItem Header="Rhyous.com">
<Grid>
<WebBrowser x:Name="WebBrowser" Source="http://www.rhyous.com"/>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
The entire web page was displayed.
So my guess is that you will see the same if you create a sample project. Then you can start adding what you did in your real project to your sample until you find what is really breaking it.

WPF: How to set background of TabItem?

How to set the background of TabItem? I tried the following code:
<TabControl>
<TabItem Header="Test" Background="Blue" Foreground="Red" />
</TabControl>
Foreground works, but Background does not work.
Any ideas? Thanks
What is happening is that in the case of a single tab, it is always selected, and so you are only seeing the selection style of the tab item.
For example, take a look at the following TabControl:
<TabControl>
<TabItem Header="Tab A" Background="Blue" Foreground="Red">
<Grid />
</TabItem>
<TabItem Header="Tab B" Background="Green" Foreground="Navy" >
<Grid />
</TabItem>
<TabItem Header="Tab C" Background="LightBlue">
<Grid />
</TabItem>
</TabControl>
Tab A will not display its Blue background until you select a different tab. If you truly want the Background to remain the same regardless of whether it is selected or not, you will need to override the control template of the TabItem.
See the question TabItem Background color changes when tabitem selected or hover over for an example of how to do this.

How to bind the name of the active TabItem to a Label in WPF?

actual the Labels shows the namespace of the control and not the name (header) of the active tabitem.
..
<Label Content="{x:Type TabControl}" />
</Grid>
<TabControl>
<TabItem Header="Header1" />
<TabItem Header="Header2" />
..
I hope this is what you want -
<TabControl x:Name="MyControl">
<TabItem Header="tab1" />
<TabItem Header="tab2" />
<TabItem Header="tab3" />
</TabControl>
<!-- ... -->
<Label Content="{Binding ElementName=MyControl, Path=SelectedItem.Header}"/>
You obviously have no clue about what you are doing, read this: Data Binding Overview
The x:Type markup extension has nothing to do with binding, it just returns the type of a given class.
One way to bind to the selected item:
<Label Content="{Binding ElementName=tc, Path=SelectedItem.Header}"/>
<TabControl Name="tc" ...>
<!-- Items -->
</TabControl>
(Note: The SelectedItem normally (- when using ItemsSource -) does not represent the selected control but the data behind the selected item)

Resources