WPF - ContentPresenter won't display Content - wpf

I am trying to create a container-like component. It uses the MaterialDesign Card as a container, places a title in it and allows space for Content.
<ContentControl
x:Class="Client.Components.AisCard"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="450"
d:DesignWidth="800">
<materialDesign:Card
Margin="0,0,20,0"
Padding="20,20,20,30">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Text="Opmerkingen"
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
FontWeight="Medium"
Margin="0,0,0,10" />
<ContentPresenter Grid.Row="1" />
</Grid>
</materialDesign:Card>
</ContentControl>
Then, I call the Component in a view and attempt to fill its Content:
<Components:AisCard
Grid.Column="0"
Grid.Row="0">
<TextBlock Text="Hello World" />
</Components:AisCard>
The result looks like this:
I expected it to look like this:
Maybe I have misunderstood the way that a ContentPresenter works. Maybe using a Component inside of a Component is not the way to go. Could anyone offer some form of assistance in the matter?

The TextBlock replaces the Card, because both just set the Content property. You would have to declare the Card as part of a ControlTemplate:
<ContentControl
x:Class="Client.Components.AisCard"
...>
<ContentControl.Template>
<ControlTemplate TargetType="ContentControl">
<materialDesign:Card
Margin="0,0,20,0"
Padding="20,20,20,30">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
Text="Opmerkingen"
Style="{StaticResource MaterialDesignHeadline5TextBlock}"
FontWeight="Medium"
Margin="0,0,0,10" />
<ContentPresenter Grid.Row="1" />
</Grid>
</materialDesign:Card>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>

Related

Unable to bind to gridview in another usercontrol

I have 3 user controls
One is the parent that holds a GridViewUserControl and a ExportUserControl
The GridViewUserControl and ExportUserControl have their own viewmodels.
When I click the ExportButton in the ExportUserControl I need to pass the gridview to a command in the ExportUserControl. Everything I try is always passing null.
How would I do something like this? ( This is giving the error "binding.elementname cannot be set while using binding.relativesource"
<telerik:RadButton Content="Export"
Command="{Binding ExportCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=view:GridViewUserControl}, ElementName=GridViewData}"
Margin="0,10,0,0" />
EDIT: Parent Control looks like this
<UserControl x:Class="Sample.Sample1.View.ParentUserControl"
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:view="clr-namespace:GroundStation.Configuration.Viewer.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
DataContext="{Binding Source={StaticResource Locator}, Path=Main}">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150"/>
<ColumnDefinition Width="5" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<view:ExportUserControl Margin="5"
Grid.Column="0"
Grid.Row="2"
Grid.RowSpan="2"
MinWidth="150"
/>
<GridSplitter Grid.Column="1"
Width="5"
Grid.Row="1"
Grid.RowSpan="3"
HorizontalAlignment="Stretch" />
<view:GridViewUserControl
Margin="5"
Grid.Column="2"
Grid.Row="1"
Grid.RowSpan="3"/>
</Grid>
</UserControl>

Can't Set Background of Grid. Possible Bug in WPF?

I have a bit of XAML in WPF like so
<TabItem Header="Remote Mode">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="/ETest;component/Images/RemoteLarge.png"/>
</Grid.Background>
</Grid>
</Grid>
Unfortunately, now, when I try to switch to the tab shown above, Visual Studio navigates to the code in the XAML, but refuses to switch to the tab in the designer. I've tried building the application and switching tabs from there too, but that doesn't appear to work either. Why can't I switch tabs now? If I remove the image from the XAML, I can switch tabs again.
As a note: The image itself is an 817x2167 .png. Could the problem possibly lie there?
Edit: I, unfortunately, don't have access to the original project until Monday. I have a copy of the image I was working with and tested using it in a basic WPF application. The following XAML works flawlessly:
<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="500" Width="750">
<Grid>
<TabControl>
<TabItem Header="Test1" />
<TabItem Header="Remote Mode">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="/WpfApplication1;component/Images/RemoteLarge.png"/>
</Grid.Background>
</Grid>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
I'll try to post more of the original project when I get the chance. Perhaps the problem lies elsewhere in the application.
Edit 2: Here's the full XAML:
<Window x:Class="ETest.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:c="clr-namespace:ETest.Controls.AutoSequence"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
MinHeight="550"
MinWidth="835"
Height="550"
Width="835"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/MainSkin.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid x:Name="LayoutRoot"
Background="#C0FFC0">
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Menu Grid.Row="0">
<Menu.Background>
<LinearGradientBrush EndPoint="0,1"
StartPoint="0,0">
<GradientStop Color="#E8E8E8"
Offset="0.528"/>
<GradientStop Color="#F5F5F5"
Offset="0.01"/>
<GradientStop Color="#E0E0E0"
Offset="1"/>
<GradientStop Color="#FFFFFF"
Offset="1"/>
</LinearGradientBrush>
</Menu.Background>
</Menu>
<TabControl Grid.Row="1">
<TabItem Header="AutoSequence">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2">
</ListBox>
<Grid Grid.Column="1" Grid.Row="0" Margin="0,0,20,0">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label DockPanel.Dock="Left"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Content="Drag Steps Here to make an Autosequence" />
<Button DockPanel.Dock="Right"
HorizontalAlignment="Right"
Margin="0,0,0,4"
Width="100"
Content="Start Test"/>
<Button DockPanel.Dock="Right"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,0,40,0"
Width="150" Height="23"
Content="**** Interface"/>
</DockPanel>
<ListBox Grid.Row="1" />
</Grid>
<GroupBox Grid.Column="1"
Grid.Row="1"
Header="Step Configuration">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<Label DockPanel.Dock="Left"
HorizontalAlignment="Left"
Content="Step Name" />
<Button DockPanel.Dock="Right"
HorizontalAlignment="Right"
Width="75"
Content="Save Step" />
<TextBox />
</DockPanel>
<Grid Grid.Row="1">
<c:Message/>
</Grid>
</Grid>
</GroupBox>
</Grid>
</TabItem>
<TabItem Header="Remote Mode">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="0">
<Grid.Background>
<ImageBrush ImageSource="/ETest;component/Images/RmtLrg.png"/>
</Grid.Background>
</Grid>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
Edit 3:
Things just got strange. I deleted the file, exported another copy from the original application, named it RmtLrg.png, added it, and the file failed to work. I tried double clicking the file in the solution explorer to view it, then switched back to my MainWindow in Visual Studio. The image was loaded in the designer and I was able to switch tabs as I normally would.
For all of a minute it was working, but, in a rush of excitement, I built the application. I attempted to switch tabs in it, but this failed. Checking back in the designer afterwards, I noticed the image is no longer loaded and I once again am unable to switch to the TabControl tab in question.
Edit 4:
The problem is still occurring and seems, quite literally, to be that the image is too big to set as a grid background (even if that makes no sense). I've tried Png, Jpg, and Gif formats and none work. Loading other, smaller images in the project works perfectly without issue.
Edit 5:
Oddly enough, loading a 3000x3000 image works perfectly. The only image that won't load so far is my 817x2167 image. Why could this be?

How to have one control expand/fill up to maxheight, then expand/fill another control in WPF?

I have the following XAML source to demonstrate what I am working on.
I want, when resizing the group vertically, is to have the first groupbox expand, up to its max height, then, when that is reached, expand the third groupbox.The third groupbox has a min height property, as well.
<UserControl
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" x:Name="Screen_1_Name"
x:Class="TestExpansionScreens.Screen_1"
Width="400" Height="400">
<Grid x:Name="LayoutRoot" Background="White" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<GroupBox Header="Thing1" Background="LightGreen" Grid.Row="0" Grid.Column="0" MaxHeight="350">
<Button Content="Stuff1" />
</GroupBox>
<GroupBox Header="Thing2" Background="LightBlue" Grid.Row="1" Grid.Column="0">
<TextBox Text="Stuff2" Height="60" />
</GroupBox>
<GroupBox Header="Thing3" Background="Pink" Grid.Row="2" Grid.Column="0">
<TextBox Text="Stuff3" />
</GroupBox>
</Grid>
</UserControl>
Normally, when I just want a single control expanded to fill the available space, I use a DockPanel. I've built this example with all kinds of assortments of grids and dockpanels, however, I have been unable to resolve how to make it work. Any idea on how to make it happen?
Thanks
You have to set the MaxHeight on your first RowDefinition, not on the GroupBox. The row will grow up to that height and then all excess space will be occupied by the third row. You can also add a MinHeight to the third row.
<Grid x:Name="LayoutRoot" Background="White" Margin="0,0,0,0">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="350" />
<RowDefinition Height="Auto"/>
<RowDefinition MinHeight="150" />
</Grid.RowDefinitions>
<GroupBox Header="Thing1" Background="LightGreen" Grid.Row="0" Grid.Column="0">
<Button Content="Stuff1" />
</GroupBox>
<GroupBox Header="Thing2" Background="LightBlue" Grid.Row="1" Grid.Column="0">
<TextBox Text="Stuff2" Height="60" />
</GroupBox>
<GroupBox Header="Thing3" Background="Pink" Grid.Row="2" Grid.Column="0">
<TextBox Text="Stuff3" />
</GroupBox>
</Grid>

WPF - Usercontrol as ListItemTemplate not filling listbox width

Just trying to get my head round WPF. I have a usercontrol which I'm using as the template for items in a listbox, however no matter what I try the usercontrol's width is always shrinking to the minimum size but I want it to fill the available width. I've found a similar query on here but it was relating just to a usercontrol not within a listbox and the solution proposed doesn't apply here.
My UserControl is defined as :
<UserControl x:Class="uReportItem"
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="60" d:DesignWidth="300">
<Grid >
<Border CornerRadius="3,3,3,3" BorderBrush="#0074BA" BorderThickness="1" Background="#00D6F9" Margin="0">
<DockPanel Margin="3,3,3,3">
<Grid Height="Auto">
<!-- Grid Definition-->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- Content -->
<!-- Top Row-->
<Button Grid.RowSpan="2">Delete</Button>
<StackPanel Orientation="Horizontal" Grid.Column="1">
<Label x:Name="Heading" Content="{Binding Heading}" FontSize="14" FontWeight="bold"></Label>
<Label x:Name="Subheading" Content="{Binding SubHeading}" FontSize="14"></Label>
</StackPanel>
<Button Grid.Column="2">Blah</Button>
<!-- Second Row-->
<Label Grid.Row="1" Grid.Column="1" x:Name="Comments">Comments</Label>
<Button Grid.Column="2">Blah</Button>
</Grid>
</DockPanel>
</Border>
</Grid>
And the implementation on the window is :
<Window x:Class="vReport"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:RecorderUI"
Title="vReport" Height="300" Width="300" Background="#00BCF0">
<Window.Resources>
<DataTemplate x:Key="Record" DataType="ListItem">
<Grid>
<local:uReportItem></local:uReportItem>
</Grid>
</DataTemplate>
<Style TargetType="ListBoxItem">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<local:uReport Margin="5" Grid.Row="0"></local:uReport>
<Border Grid.Row="1" BorderBrush="#0074BA" CornerRadius="3">
<ListBox Margin="5" Background="#00D6F9" BorderBrush="#0074BA" x:Name="ListRecords" ItemsSource="{Binding Items}" ItemTemplate ="{StaticResource Record}"></ListBox>
</Border>
<TextBlock Grid.Row="2" x:Name="SelectedItem" Text="{Binding Path=SelectedItem.Heading, Mode=TwoWay}"></TextBlock>
</Grid>
Any ideas?
Try setting HorizontalContentAlignment to Stretch on the ListBox:
<ListBox Margin="5" Background="#00D6F9" BorderBrush="#0074BA" x:Name="ListRecords" ItemsSource="{Binding Items}" ItemTemplate ="{StaticResource Record}" HorizontalContentAlignment="Stretch"></ListBox>

WPF Alignment not working

I use the following code in my WPF app, for a groupbox:
<GroupBox Style="{StaticResource groupBoxStyle}" Header="RB" Margin="0,6,268,249" Name="groupBoxRB" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="276">
This control is within a grid, that is defined like this:
<TabControl Grid.Row="1" Margin="4,12,0,12" Name="tabControl1" Background="Transparent">
<TabItem Style="{StaticResource tabItemMainStyle}" Header="Main" Name="tabItemMain" >
<Grid Background="Transparent" MinHeight="926" MinWidth="1218">
And that tabcontrol is within the main grid:
<Window x:Class="SRM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
xmlns:local="clr-namespace:SRM" ResizeMode="CanResize"
Title="SRM"
Width="991" Icon="Resources\Icons\SRM.png"
WindowStartupLocation="CenterScreen" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="1024" Height="774" Visibility="Visible" Foreground="#00000000" Margin="0">
<Grid Style="{StaticResource styleBackground}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5" />
</Grid.ColumnDefinitions>
I don't understand why the groupbox i mentioned won't stretch on its vertical axis... any idea?
Thanks.
PS: the staticresources don't define heights/widths/alignments
My problem came from the designers (vs2010's or blend's) that by default put margins if you place controls manually in them... setting the Margin to 0 solved the problem:
<GroupBox Style="{StaticResource groupBoxStyle}" Header="RB" Margin="0" Name="groupBoxRB" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="276">
I think you're missing something in your styles or something. I just made the following from your code and stretching works fine in standalone app.
<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">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="2.5" />
</Grid.ColumnDefinitions>
<TabControl Grid.Row="1" Margin="4,12,0,12" Name="tabControl1" Background="Transparent">
<TabItem Header="Main" Name="tabItemMain" >
<Grid Background="Transparent" MinHeight="200" MinWidth="200">
<GroupBox Header="RB" Name="groupBoxRB" HorizontalAlignment="Right" VerticalAlignment="Stretch" Width="276">
<Rectangle Fill="Orange" />
</GroupBox>
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>

Resources