I'm trying to put some content inside my TabItem, but I can't add a container that fills the space of the TabItem. Anything that I add shows up centered.
I'm using a Theme from WPF Toolkit (WhistlerBlue.xaml), so I think that maybe it's that what is causing me this issue.
I cannot remove the Theme, because I need it. At most I could change something in it, but I'm new to WPF, and don't know what should I be changing.
My TabControl looks like this:
<TabControl Margin="0,71.25,0,206.25" Name="tabControl1" TabStripPlacement="Left">
<TabItem Name="tabItem1" FlowDirection="LeftToRight" FontSize="22" Height="200" Width="60" >
<TabItem.Header>
<StackPanel Orientation="Horizontal" >
<Image Height="40" Width="40" Margin="20,0,0,0" VerticalAlignment="Center"></Image>
<TextBlock Margin="15,0,25,0" VerticalAlignment="Center" FontWeight="Bold">
Header
</TextBlock>
</StackPanel>
</TabItem.Header>
<TabItem.Content>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0" >
<TextBlock>Test</TextBlock>
</StackPanel>
</TabItem.Content>
</TabItem>
</TabControl>
There is similar question, but it don't has the answer: In WPF, how do I get the content of a tabItem to fill available space?
Can someone help me?
Thanks.
Ok, I found the answer.
The .xaml of the theme started with these settings for TabItem:
<Style d:IsControlPart="True" TargetType="{x:Type TabItem}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
I've changed Center to Stretch, and the problem was solved.
I really need to learn WPF from a book, instead of just trying things out.
Use <controls1:TabItem HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" >
Related
So I have 2 similar problems with the below image. The image is of a UserControl that has been added to a viewbox inside another UserControl:
Image
The button in the top-left does not fill the whole of the grid cell, but the image within it fills the whole button .I have been trying out different methods of binding button images. This is why this is not the same for the other buttons in the grid. However I can't see how they should differ
The black images on the centre top, left, right, and bottom buttons don't fill their buttons. However, when editing the code, the designer shows them filling those buttons. The code for these is identical to the ContentControl above, but has an image path linking to a completely black image instead.
Was wondering if these problems might be related or have a similar fix? I've tried using extra viewboxes and stretch to fill/ alignment parameters but they seem to make no difference.
EDIT:
Implementing Location.xaml in parent UserControl:
<Viewbox Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Margin="10 10 10 10">
<ContentControl Content="{Binding CurrentLocationViewModel}">
<ContentControl.Resources>
<DataTemplate DataType="{x:Type locationViewModel:SmallRoomViewModel}">
<locationView:SmallRoomView/>
</DataTemplate>
<DataTemplate DataType="{x:Type locationViewModel:LargeRoomViewModel}">
<locationView:LargeRoomView/>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</Viewbox>
SmallRoomView.xaml (the UserControl in the image):
<Grid>
<Grid.Resources>
<Button x:Key="wallTile" x:Shared="false" PreviewMouseDown="OnMouseDown" Style="{StaticResource appWallTile}"/>
<Button x:Key="floorTile" x:Shared="false" PreviewMouseDown="OnMouseDown" Style="{StaticResource appFloorTile}"/>
<Button x:Key="doorTile" x:Shared="false" PreviewMouseDown="OnMouseDown" Style="{StaticResource appDoorTile}"/>
</Grid.Resources>
<Button Grid.Row="0" Grid.Column="0" PreviewMouseDown="OnMouseDown">
<Image Stretch="Fill" Source="{Binding tile0_0}"/>
</Button>
<ContentControl Grid.Row="0" Grid.Column="2" Content="{StaticResource doorTile}"/>
<ContentControl Grid.Row="0" Grid.Column="3" Content="{StaticResource wallTile}"/>
...
</Grid>
App.xaml:
<Style x:Key="appDoorTile" TargetType="Button" x:Shared="false">
<Setter Property="Content">
<Setter.Value>
<Image Stretch="Fill" Source="./AllResources/images/tiles/doorTile.png"/>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="appFloorTile" TargetType="Button" x:Shared="false">
<Setter Property="Content">
<Setter.Value>
<Image Stretch="Fill" Source="./AllResources/images/tiles/floors/floorTile.png"/>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="appWallTile" TargetType="Button" x:Shared="false">
<Setter Property="Content">
<Setter.Value>
<Image Stretch="Fill" Source="./AllResources/images/tiles/walls/wallTile.png"/>
</Setter.Value>
</Setter>
</Style>
My ListView is not behaving as I want and I can't seem to find anything useful on this topic.
So the problem is, that I have a ListView which uses a DataTemplateSelector based on Datatype.
So this all works fine and shows the correct control, but the problem is, that the items do not stretch horizontally!
All solutions regardings ListViewItems not stretching suggest to use
<Style x:Key="ListViewItemContainerStyle" TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
and to set
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
in the ListView.
This does work fine when no DataTemplateSelector is used, but in combination with that DataTemplateSelector it doesn't and the controls in the list do not get their parents size.
The DataTemplateSelector is by the book and works fine, so it is omitted here.
I tried all kind of combinations of Width="Auto", HorizontalAlignment and HorizontalContentAlignment, but I could not make it work. I could imagine that it might help to pass the Width or HorizontalContentAlignment in this DataTemplateSelector, but I couldn't find a way to do this.
Here is the minimal XAML:
<UserControl.Resources>
<Style x:Key="ListViewItemContainerStyle" TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
<DataTemplate x:Key="DrawDataTemplate" DataType="viewModels:DrawSectionViewModel">
<infrastructure:DrawSectionItem />
</DataTemplate>
<DataTemplate x:Key="FeedDataTemplate" DataType="viewModels:FeedSectionViewModel">
<infrastructure:FeedSectionItem />
</DataTemplate>
<infrastructure:SectionTemplateSelector x:Key="SectionTemplateSelector"
FeedSection="{StaticResource FeedDataTemplate}"
DrawSection="{StaticResource DrawDataTemplate}">
</infrastructure:SectionTemplateSelector>
</UserControl.Resources>
<ListView Grid.Column="0" Width="Auto" Margin="0,0,0,0"
ItemsSource="{Binding LeftSections }"
ItemTemplateSelector="{StaticResource SectionTemplateSelector}"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemContainerStyle="{StaticResource ListViewItemContainerStyle}" />
Any help would be greatly appreciated
Thanks
Added the item controls. The Draw section is pretty much the same structure.
<UserControl x:Class="Infrastructure.FeedSectionItem"
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" Height="45" Width="188" FontFamily="Segoe UI Light" Background="Black"
>
<Grid Margin="0" >
<StackPanel Orientation="Vertical" Margin="10,0,0,0" HorizontalAlignment="Left" Width="Auto">
<TextBlock Text="Feed" Foreground="White" FontWeight="Bold" FontSize="16" />
<TextBlock Text="" Foreground="White" FontWeight="Bold" />
</StackPanel>
</Grid>
</UserControl>
Remove Width="188" from your UserControl.
In the designer you can set d:DesignWidth="188"
I have looked at many questions/answers but couldn't find what I was exactly looking for,
I am trying to change the background colour of the expander's header only and not have the same colour continue for the content within the expander. Preferably within xaml but a vb.net solution would suffice.
(Any comments or suggestions will be helpful)
If this is a duplicated question please direct me to the answer and leave the question open to help others avoid the same issue in the future!
Thanks.
I am not sure whether this is what you are exactly looking for, but you could change the header background by simply doing that:
<Expander VerticalAlignment="Center">
<Expander.Header>
<Grid Background="LightBlue">
<TextBlock Text="Expander Header"/>
</Grid>
</Expander.Header>
<StackPanel>
<TextBlock Text="Cotent"></TextBlock>
</StackPanel>
</Expander>
Or you could override the default Expander's Header DataTemplate by using HeaderTemplate
<Window.Resources>
<DataTemplate x:Key="HeaderText">
<Border Height="25" Background="LightBlue">
<TextBlock Text="{Binding}"
Margin="4 0"
VerticalAlignment="Center"
Foreground="White"
FontSize="11"
FontWeight="Normal"
/>
</Border>
</DataTemplate>
<Style TargetType="{x:Type Expander}">
<Setter Property="HeaderTemplate" Value="{StaticResource HeaderText}"/>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Expander VerticalAlignment="Center" Header="Expander Header">
<StackPanel>
<TextBlock Text="Cotent"></TextBlock>
</StackPanel>
</Expander>
</Grid>
I had a lot of problems with getting the header background set.
I found the easiets weay to do it was to simply make a coloured rectangle and put it behind the expander. (use Margin and Height to make it fit)
<Rectangle Grid.Row="1" Grid.Column="0" Fill="LightBlue" Height="33" Margin="0,0,0,-35" />
or use a border if you want rounded corners:
<Border CornerRadius="15" Height="33" Margin="0,0,0,-35" Background="LightBlue" />
I'm trying to display a Listview items through RectangleBox (Which I managed to do using ControlTemplate)
My problem is the how the RectangleBox are being organised on the window.
I'd like to display as many as I can on one line (Depending on the windows' width) and when one line is filled, go start a new one and so on.
The organisation would be updated depending on the window's width after each resize:
This might give a better idea of what I want, you see each RectangleBox (Labelled 1,2...) organisation on the window changing depending on its width.
Here is my current code in my MainWindow xaml:
<ListView Name="PlayerList" ItemsSource="{Binding Players}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
Having the following Style applied:
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<GroupBox Header="{Binding Name}" Width="250" Height="125" Name="Disp" HorizontalAlignment="Left">
<GroupBox.HeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="5,0,0,0" TextAlignment="Right"></TextBlock>
</StackPanel>
</DataTemplate>
</GroupBox.HeaderTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Char}"/>
<TextBlock Text="{Binding Item}"/>
</StackPanel>
</GroupBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But so far, the UniformGrid was just a failled attempt, I've been looking around but couldn't really find a solution. Hopefully it was just me being dumb and missing something obvious D:
Thanks for the help.
Thanks for few comments.
WrapPanel was indeed the right way, just didn't think of it :P
I just needed to add the following property:
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
To my listview in order to avoid all the items to stack on one line.
I am attempting to create a WrapPanel with seamless ImageButtons containing Artwork. I put together the following ContentTemplate in the hopes that it would provide the seamless look required; however a thin white-line remained around each of the buttons. Can anyone steer me in the right direction?
<Button.ContentTemplate>
<DataTemplate DataType="{x:Type local:ArtInfo}">
<Border Name="border" BorderThickness="0" BorderBrush="blue" Height="280" Width="250" Background="#262c40">
<StackPanel>
<Grid>
<Grid.Resources>
<local:MyConverter x:Key="MyConverter"></local:MyConverter>
<ObjectDataProvider x:Key="Properties.Settings" ObjectType="{x:Type lcl:Properties.Settings}" />
</Grid.Resources>
<Image Name="ArtImage" Margin="10,15,0,0" Height="195" Width="195" VerticalAlignment="Top" >
<Image.Source>
<Binding Path="ArtImage"/>
</Image.Source>
</Image>
</Grid>
<TextBlock Text="{Binding Path=ArtClass}" Margin="10,-17,0,0" FontSize="11" Foreground="white" />
<TextBlock Text="{Binding Path=Student}" Margin="10,0,0,0" FontSize="11" Foreground="white" />
<TextBlock Text="1998" Margin="10,0,0,0" FontSize="11" Foreground="white" />
</StackPanel>
</Border>
</DataTemplate>
</Button.ContentTemplate>
The ContentTemplate tells WPF how to display the content within the Button -- the Button chrome (such as the border and background) remains, and the templated content is displayed within and over that chrome.
You want to replace the entire appearance of the Button, border and all, rather than just customising how its content is displayed. To do this, you need to use the Template property instead. The value of Button.Template is a ControlTemplate rather than a DataTemplate. Within that ControlTemplate, you can use the ContentPresenter to display the "data-templated" content.
In your case, since your DataTemplate is doing all the work, you could get away with a raw ContentPresenter as your template:
<Button.Template>
<ControlTemplate TargetType="Button">
<ContentPresenter />
</ControlTemplate>
</Button.Template>
However, if all your buttons are using the same background, you could move this into the ControlTemplate:
<Button.Template>
<ControlTemplate TargetType="Button">
<Border BorderBrush="Blue" ...>
<ContentPresenter />
</Border>
</ControlTemplate>
</Button.Template>
You could then remove the Border from the DataTemplate. This would really only matter if you were planning to reuse the same Button.Template with other content templates and wanted to keep the appearance of the Button consistent across different kinds of content.
create a usercontrol, put the botton & image in a grid.
<Grid>
<Image Source="icon.png" Panel.ZIndex="1" />
<Button
Panel.ZIndex="2"
FocusVisualStyle="{x:Null}"
Background="Transparent"/>
</Grid>