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.
Related
I am new to C# and WPF so please give me some ideas:
I have an WPF app used to display some stack panels,all stack panels default Visibility is set to collapsed and they will switch to visible according to the received data.
Now I want to make all these stack panels to resources so I can reuse it in some new added tab controls and stack panels.
<StackPanel x:Name="ColorOption" Visibility="Collapsed">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}" />
</Button.Content>
</Button>
</StackPanel>
Above is one example of stack panels I am using. In the code behind the function "Color_Click" will change this "ColorOption" stack panel state and do something.
However after I try to put this stack panel into Windows.Resources
<Window.Resources>
<StackPanel x:Name="ColorOption" Visibility="Collapsed" x:Key="ColorOption">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}" />
</Button.Content>
</Button>
</StackPanel>
</Window.Resources> (I also put the style files inside)
In the tab controls I did
<TabControl>
<TabItem Header="Tab 1" Content="{StaticResource ColorOption}"/>
</TabControl>
The visual studio shows error in the code behind says "ColorOption does not exist in the current context"
How can I fix this? Is any way to set the context? thank you
You can simply wrap the StackPanel in ContentControl and make it ControlTemplate.
<ControlTemplate x:Key="ColorOptionTemplate" TargetType="{x:Type ContentControl}">
<StackPanel x:Name="ColorOption" Visibility="Collapsed">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}"/>
</Button.Content>
</Button>
</StackPanel>
</ControlTemplate>
However, you will need to change properties of controls inside the ContentControl and it would be cumbersome. So the StackPanel could be wrapped in UserControl instead.
<UserControl x:Class="WpfApp1.ColorOptionControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel x:Name="ColorOption" Visibility="Collapsed">
<TextBlock Text="Line Color" Style="{StaticResource ItemNameTextBlockStyle}"/>
<Button Style="{StaticResource ColorButtonStyle}" Click="Color_Click">
<Button.Content>
<Rectangle x:Name="LineColorRect" Style="{StaticResource ColorSelectionRectangleStyle}"/>
</Button.Content>
</Button>
</StackPanel>
</UserControl>
This is a common way in WPF. The downside is that you will need to add dependency properties to UserControl and wire up them with dependency properties of internal controls so that you can set their values at the level of UserControl and bridge them with external controls and window. This could be complicated and cumbersome as well.
So I think ideally it would be better to find an existing control which has similar functionalities you want and create a custom control deriving from the existing one.
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>
I have a listbox where I have to add about 20 static custom items. All the items are based on the same template (something like that) :
<Border>
<StackPanel Orientation="Horizontal">
<Image Source="" Height="30" />
<TextBlock Text="" VerticalAlignment="Center" />
</StackPanel>
</Border>
I don't want to repeat that 20 times in the ListBox.Items I would like to have some kind of UserControl where I could do something Like the following where I could set some custom properties :
<ListBox>
<ListBox.Items>
<MyListBoxTemplate x:Name="Item1" ItemText="Item #1" ItemImageSource="/Image1.jpg" />
<MyListBoxTemplate x:Name="Item2" ItemText="Item #2" ItemImageSource="/Image2.jpg" />
...
</ListBox.Items>
</ListBox>
But I don't wan't to create a userControl just for that!!! Is there an easy way to put that template in the Window.Resources?
Thanks
If you are ONLY using it for that SPECIFIC listbox, you can just assign the ItemTemplate property. This will need to work in conjunction with a collection of custom objects defined in your resources somewhere else. This will save you from creating a custom UserControl, but you will need an object that can be defined in XAML and a list of them in XAML anyway. To be honest, creating a UserControl is relatively painless and may be easier, but it is possible without doing so.
<ListBox>
<ListBox.ItemTemplate>
<DataTemplate TargetType="CustomObjectType">
<Border>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding ImageSource}" Height="30" />
<TextBlock Text="{Binding TextContent}" VerticalAlignment="Center" />
</StackPanel>
</Border>
<DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
EDIT: If you are going to use it in more than one place, put the DataTemplate in your Application resources and ive it a key, then assign the ItemTemplate property to {StaticResource MyListBoxItemsTemplateKey}
Not my favorite approach since it uses the XmlDataProvider and XPath syntax (which I tend to always forget). But you can embed your static data as xml within your Window.Resources like so:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Window.Resources>
<XmlDataProvider x:Key="MyStaticData" XPath="StaticItems" >
<x:XData>
<StaticItems xmlns="">
<StaticItem>
<ItemText>Item #1</ItemText>
<ItemImageSource>/Image1.jpg</ItemImageSource>
</StaticItem>
<StaticItem>
<ItemText>Item #2</ItemText>
<ItemImageSource>/Image2.jpg</ItemImageSource>
</StaticItem>
</StaticItems>
</x:XData>
</XmlDataProvider>
</Window.Resources>
<Grid>
<ListBox>
<ListBox.ItemsSource>
<Binding Source="{StaticResource MyStaticData}" XPath="StaticItem" />
</ListBox.ItemsSource>
<ListBox.ItemTemplate>
<DataTemplate>
<Border>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding XPath=ItemImageSource}" Height="30" />
<TextBlock Text="{Binding XPath=ItemText}" VerticalAlignment="Center" />
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
Then within your ListBox bind to the XmlDataProvider you specified and use the XPath notation within the bindings to drill down to the data you want the controls to bind to.
This site has a couple good examples too:
http://vbcity.com/blogs/xtab/archive/2010/12/24/more-xpath-examples-in-a-wpf-application.aspx
Hope this helps!
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.
The goal:
I'm trying to achieve something like this in WPF:
(source: wordpress.org)
An initial solution:
At the moment, I'm trying to use an ItemsControl with an ItemTemplate composed of an Expander.
I want a consistent look for the Header portion of the Expander, but I want the Content portion of the Expander to be completely flexible. So, it's basically a set of "portlets" stacked vertically, where each portlet has a consistent title bar but different content.
The code so far:
This is what I have at the moment:
<ItemsControl
Grid.Row="2"
Grid.Column="2">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander>
<Expander.HeaderTemplate>
<DataTemplate>
<StackPanel
Orientation="Horizontal">
<TextBlock
FontSize="14"
FontWeight="Bold"
Text="Title_Of_Expander_Goes_Here" />
<TextBlock
Margin="10,0,0,0"
FontWeight="Bold"
FontSize="18"
Text="*" />
</StackPanel>
</DataTemplate>
</Expander.HeaderTemplate>
<Expander.Template>
<ControlTemplate
TargetType="Expander">
<Border
BorderThickness="1">
<ContentPresenter />
</Border>
</ControlTemplate>
</Expander.Template>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.Items>
<StackPanel>
<TextBlock
FontSize="14"
FontWeight="Bold"
Text="Users:" />
<wt:DataGrid
Margin="0,1,0,0"
AutoGenerateColumns="False"
CanUserAddRows="True"
CanUserDeleteRows="True"
ItemsSource="{Binding Source={StaticResource Main_SystemUsers}, XPath=//Users/*}">
<wt:DataGrid.Columns>
<wt:DataGridTextColumn
Header="User Name"
Binding="{Binding XPath=#UserName}" />
<wt:DataGridComboBoxColumn
Header="Role"
ItemsSource="{Binding Source={StaticResource Main_UserRoles}, XPath=//Roles/*}"
SelectedValueBinding="{Binding XPath=#Role}" />
</wt:DataGrid.Columns>
</wt:DataGrid>
<StackPanel
Margin="0,10,0,0"
Orientation="Horizontal">
<Button
Content="Add New User..." />
<Button
Margin="10,0,0,0"
Content="Delete User..." />
</StackPanel>
</StackPanel>
</ItemsControl.Items>
</ItemsControl>
Discussion:
The only thing that shows up when I run this is the DataGrid of users and the buttons ("Add New User" and "Delete User") below it. There is no Expander or title bar. Also, even if I did see one, I'm not sure how to set up a Binding for the title that appears on the title bar. I know how to do bindings if I use ItemsSource, but I wanted to set my items declaratively.
The question:
How should I go about this? I'm looking for either a fix for what I have now or a clean-sheet solution.
Edit:
What I ended up doing was replacing the ItemsControl with a StackPanel and just writing a style for my expanders. This proved to be much simpler, and there really was no benefit to the ItemsControl since I needed to declare custom content for each item anyway. The one issue remaining was how to achieve a custom title for each expander. That's where #Thomas Levesque's suggestion to use TemplateBinding came in. All I had to do was replace Text="Title_Of_Expander_Goes_Here" in my header's template (see code above) with Text="{TemplateBinding Content}".
You're not seeing the Expander because you redefined its template. This one should work better :
...
<Expander.Template>
<ControlTemplate
TargetType="Expander">
<Border
BorderThickness="1">
<Expander Content="{TemplateBinding Content}" Header="{TemplateBinding Header}"/>
</Border>
</ControlTemplate>
</Expander.Template>
...
Personally I think a TreeView control would give you a much better base to work from, especially if you're using Expression Blend as a basis to create new/blank Templates from for items. Seeing the default Templates is extremely enlightening and gives you much more fine-grained control and better understanding and insight into how things work by default. Then you can go to town on them. It also looks like you're working with Hierchical Data and TreeViews inherently lend themselves well to working with such data.