WPF Edges run through rounded Corner

WPF Edges run through rounded Corner - wpf

I am trying to make a small window with a background image with rounded corners and blurry glass effect but when i use Rectangle.Fill then i can see from the rectangle, where the rounded corners should be but the image bleeds through. Is there no possibility to cut the image along these corners or something?
<Window x:Class="Weather_window.MainWindow"
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"
xmlns:local="clr-namespace:Weather_window"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
>
<Grid Margin="0,0,0,-16" Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Rectangle x:Name="Shadowshape" Fill="White" Margin="8" Grid.Column="1" Grid.Row="2" Grid.RowSpan="3" Opacity="0">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="8" ShadowDepth="20"/>
</Rectangle.Effect>
</Rectangle>
<Border x:Name="Test" BorderThickness="0" Grid.Column="1" Grid.Row="2" Grid.RowSpan="3" Background="AliceBlue" CornerRadius="25" ClipToBounds="True" Opacity="1">
<Rectangle x:Name="Blur" Margin="0" >
<Rectangle.Fill>
<ImageBrush ImageSource="/Sample.jpeg" Stretch="UniformToFill"/>
</Rectangle.Fill>
<Rectangle.Effect>
<BlurEffect KernelType="Gaussian" Radius="10" />
</Rectangle.Effect>
</Rectangle>
<Border.CacheMode>
<BitmapCache/>
</Border.CacheMode>
</Border>
</Grid>
</Window>

Related

C# WPF If two Rectangles with different background colors overlap completely, the border of the Rectangele below will appear

I use Rectangle and button to do the test, but the results are not the same
I want to overlap two rectangles of different colors, and i don't want see the rectangle below, but this is not the case.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1">
<Border>
<Canvas x:Name="Pad">
<Rectangle Height="100"
Width="100"
Fill="Red"
Canvas.Left="10"
ClipToBounds="True"
Canvas.Top="10"
>
</Rectangle>
<Rectangle Height="100"
Width="100"
Fill="White"
Canvas.Left="10"
Canvas.Top="10">
</Rectangle>
</Canvas>
</Border>
</Border>
</Grid>
If I use two buttons to overlap, I will not see the border below. Why is the result of using rectangle and button different ?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1">
<Border>
<Canvas x:Name="Pad">
<Button Height="100"
Width="100"
BorderThickness="0"
Background="Red"
Canvas.Left="10"
ClipToBounds="True"
Canvas.Top="10">
</Button>
<Button Height="100"
Width="100"
Background="White"
BorderThickness="0"
Canvas.Left="10"
Canvas.Top="10">
</Button>
</Canvas>
</Border>
</Border>
</Grid>

I use SnapsToDevicePixels="True" to solve the problem
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="Black" BorderThickness="1" Grid.Row="1" Grid.Column="1">
<Border>
<Canvas x:Name="Pad">
<Rectangle Height="100"
Width="100"
Fill="Red"
Canvas.Left="10"
ClipToBounds="False"
SnapsToDevicePixels="True"
Canvas.Top="10">
</Rectangle>
<Rectangle Height="100"
Width="100"
Fill="White"
SnapsToDevicePixels="True"
Canvas.Left="10"
Canvas.Top="10">
</Rectangle>
</Canvas>
</Border>
</Border>
</Grid>
Update
The result after use:

The problem seem to go away if ClipToBounds="False" is set for both Rectangles.

Expander in Grid does not collapse

I want my Expandercolumn to take 30% width when expanded. I also want the column of the Expander to shrink when collapsed and the other grids to increase size while keeping their proportion.
Aside of some margin I want Column 1: 30% Column 2 and 3 to have 35% each
I thought I need an auto column for the Expander, but then nothing tells it what proportions it should have. If I set a proportion, it does either not shrink the Expanderand if I change the alignments, I can't get the right combination.
This is my current code. The rectangles are just placeholders.
<Grid>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2.5*"/>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="0.3*" />
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Expander Background="Crimson" IsExpanded="False" ExpandDirection="Right" Grid.Row="1"
Grid.RowSpan="2" Grid.Column="1" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Rectangle Fill="Aquamarine" Width="Auto" HorizontalAlignment="Stretch"/>
</Expander>
<Rectangle Height="Auto" Fill="Coral" Width="Auto" Grid.Row="2" Grid.Column="3" />
<Rectangle Height="Auto" Fill="DarkOliveGreen" Width="Auto" Grid.Row="2" Grid.Column="2"/>
</Grid>

You can create a style for the ColumnDefinition in question that:
Sets the Width to 0.3* when the Expander is expanded
Sets the Width to Auto, when it is collapsed.
Assign an x:Name to the Expander and use a DataTrigger in the style that binds the IsExpanded property of Expander with ElementName syntax. Use a setter for the default Width value.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
<RowDefinition Height="2.5*"/>
<RowDefinition Height="0.2*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition>
<ColumnDefinition.Style>
<Style TargetType="{x:Type ColumnDefinition}">
<Setter Property="Width" Value="0.3*"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsExpanded, ElementName=MyExpander}" Value="False">
<Setter Property="Width" Value="Auto"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Expander x:Name="MyExpander" Background="Crimson" IsExpanded="False" ExpandDirection="Right" Grid.Row="1"
Grid.RowSpan="2" Grid.Column="1" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Rectangle Fill="Aquamarine" Width="Auto" HorizontalAlignment="Stretch"/>
</Expander>
<Rectangle Height="Auto" Fill="Coral" Width="Auto" Grid.Row="2" Grid.Column="3" />
<Rectangle Height="Auto" Fill="DarkOliveGreen" Width="Auto" Grid.Row="2" Grid.Column="2"/>
</Grid>
Collapsed Expander.
Expanded Expander.

WPF Grid of buttons, non-percise row count and even spacing

I'm trying to duplicate this https://i.stack.imgur.com/WawQc.png, which is a 4*11 grid of 64*64 buttons, made in JavaFX, with WPF
<Window x:Class="Kassa.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Kassa"
Title="Kassa" Width="1280" Height="720" Icon="Resources/Kassa.ico" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">
<Grid ShowGridLines="True" Width="264" Height="720" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="64"/>
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
</Grid.ColumnDefinitions>
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Margin="0" Grid.Row="0" Grid.Column="0" Width="64" Height="64">Kogus</Button>
<Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" Grid.Row="10" Grid.Column="3" Width="64" Height="64">Kassa</Button>
</Grid>
</Window>
No matter what I try, it looks like this https://i.imgur.com/HNBCo3r.png which is horrible. Is there a way to create a button grid in WPF that is normal enough to scale itself properly? Thanks. 10 rows minimum...

I'd suggest ignoring the pixel specificity of your buttons and instead allowing your grid to scale to any size within the window. Your buttons would then auto-size to fit, and you'd just ensure that, at all times, you have a grid of 4x11.
Code similar to the below should get you the desired effect.
<Window x:Class="WpfApp1.MainWindow"
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"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d" Title="Kassa" Width="1280" Height="720" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.Resources>
<ResourceDictionary>
<Style TargetType="{x:Type Button}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
</Style>
</ResourceDictionary>
</Grid.Resources>
<Button Margin="0" Grid.Row="0">Kogus</Button>
<Button Grid.Row="10" Grid.Column="3">Kassa</Button>
</Grid>
</Grid>
</Window>
(EDIT: I've updated this to have your 2 panel layout, with the right panel (your buttons) taking up 20% of available space at all times)

Try this. You are missing SizeToContent="WidthAndHeight" on the main widnow
And if you want to fix the width and height and prevent user from resizing you can add this property ResizeMode="NoResize"(also remove the scrollviewer if you want in that case since it wont be really needed if you prevent resizing)
<Window x:Class="WpfApplication3.MainWindow"
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"
xmlns:local="clr-namespace:WpfApplication3"
mc:Ignorable="d"
Title="MainWindow" Height="750" Width="300" SizeToContent="WidthAndHeight">
<ScrollViewer >
<Grid ShowGridLines="True" Width="Auto" Height="Auto" HorizontalAlignment="Right">
<Grid.RowDefinitions>
<RowDefinition Height="64"/>
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
<RowDefinition Height="64" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
<ColumnDefinition Width="64" />
</Grid.ColumnDefinitions>
<Button Grid.Row="10" Grid.Column="3">TEST</Button>
</Grid>
</ScrollViewer>
</Window>

You can change the column width and height from Auto to * if you want the grid buttons to stretch and collapse with the containing window.
<Grid x:Name="container" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Grid.Row="0" Grid.Column="0" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="1" Grid.Column="2" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="3" Grid.Column="4" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="5" Grid.Column="3" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="7" Grid.Column="2" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="9" Grid.Column="1" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="0" Grid.Column="0" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
<Button Grid.Row="0" Grid.Column="0" Width="64" HorizontalAlignment="Center" VerticalAlignment="Center" Height="64">Kogus</Button>
</Grid>

Tab-shaped border needs clipping

I have a spec for an application with three columns where the central one bows in into an inverted tab shape.
I have the basics figured out:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="371*"></ColumnDefinition>
<ColumnDefinition Width="469*"></ColumnDefinition>
<ColumnDefinition Width="371*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="83*"></RowDefinition>
<RowDefinition Height="309*"></RowDefinition>
<RowDefinition Height="223*"></RowDefinition>
<RowDefinition Height="67*"></RowDefinition>
</Grid.RowDefinitions>
<TextBox Background="Transparent" Grid.Row="0"
Text="Foo" HorizontalAlignment="Center" VerticalAlignment="Center" >
</TextBox>
<Border Grid.Row="0" BorderBrush="Red" BorderThickness="0,0,0,4"></Border>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="221*"></RowDefinition>
<RowDefinition Height="171*"></RowDefinition>
<RowDefinition Height="290*"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
</Grid>
<Border Grid.Row="0" BorderBrush="Red" BorderThickness="4,0,4,4" CornerRadius="50" >
</Border>
</Grid>
</Grid>
But the inverted tab border is in need of clipping about 60% of the way down. I can of course position an element on top of it but that seems like the wrong solution and I'd like to avoid it.
I've looked at the Border.Clip property but can't quite figure out how to work with it nor find much in the way of documentation. What do I need to do here?

There's a bunch of different ways you can accomplish this, some will be more appropriate for potential resizing considerations than others etc. Here's just a few potential solution examples.
<StackPanel>
<!-- added -->
<Grid Background="LightBlue" Height="100">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="2"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="3"
Fill="DarkBlue"/>
<Rectangle Grid.Row="1" Grid.ColumnSpan="3"
Fill="Yellow"/>
<Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="1"
Background="DarkBlue"
BorderBrush="Yellow" BorderThickness="2,0,2,2"
CornerRadius="0,0,20,20"/>
</Grid>
<!-//-->
<Grid Background="LightBlue" Height="100">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="3"
Fill="DarkBlue"/>
<Rectangle Grid.ColumnSpan="3" VerticalAlignment="Bottom" Height="2"
Fill="Yellow"/>
<Border Grid.Row="1" Grid.RowSpan="2" Grid.Column="1"
Background="DarkBlue" Margin="0,-2,0,0"
BorderBrush="Yellow" BorderThickness="2,0,2,2"
CornerRadius="0,0,20,20"/>
</Grid>
<!-- Or another, or another, or another... -->
<Grid Background="LightBlue" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="3" Height="50"
VerticalAlignment="Top" Background="DarkBlue"
BorderBrush="Yellow" BorderThickness="0,0,0,2"/>
<Border Grid.Column="1" Height="80" CornerRadius="20"
VerticalAlignment="Top" Background="DarkBlue" BorderThickness="2,0,2,2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="DarkBlue" Offset="0.6"/>
<GradientStop Color="#FFFFFF00" Offset="0.6"/>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Grid>
<Grid Background="LightBlue" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Column="1" Height="80" CornerRadius="20"
VerticalAlignment="Top" Background="DarkBlue"
BorderBrush="Yellow" BorderThickness="2,0,2,2"/>
<Border Grid.ColumnSpan="3" Height="50"
VerticalAlignment="Top" Background="DarkBlue"
BorderBrush="Yellow" BorderThickness="0,0,0,2"/>
<Rectangle Grid.Column="1" Height="51" Margin="2,0"
VerticalAlignment="Top" Fill="DarkBlue"/>
</Grid>
<Grid Background="LightBlue" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="3" Height="50"
VerticalAlignment="Top" Background="DarkBlue"
BorderBrush="Yellow" BorderThickness="0,0,0,2"/>
<Border Grid.Column="1" Height="80" CornerRadius="20"
VerticalAlignment="Top" Background="DarkBlue"
BorderBrush="Yellow" BorderThickness="2,0,2,2"
Clip="M0,47.7 L175,47.7 L175,80 L0,80 z"/>
</Grid>
</StackPanel>

CornerRadius has a constructor that can take 4 values for the radius of each corner: top-left, top-right, bottom-right, bottom-left.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox Background="Transparent" Grid.Row="0" Grid.Column="0"
Text="Foo" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Border Grid.Row="1" Grid.Column="1" BorderBrush="Red" BorderThickness="4,0,4,4" CornerRadius="0, 0, 50, 50" />
</Grid>
Another option (probably the one I would choose) is to use a TabControl, put the tab on the bottom and center it.
<TabControl TabStripPlacement="Bottom" Background="DarkBlue" BorderBrush="Yellow" Margin="3" >
<TabControl.Resources>
<Style TargetType="{x:Type TabPanel}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
</TabControl.Resources>
<TabItem Header="Test" Background="DarkBlue" BorderBrush="Yellow" Foreground="Yellow" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox Grid.Row="1" Text="Foo" />
</Grid>
</TabItem>
</TabControl>

Getting "HRESULT E_FAIL has been returned from a call to a component"

I try to add GanttView to the ChildWindow and get the Error HRESULT E_FAIL has been returned from a call to a component.
I did not do anything, just add the GanttView control, below is my code.
<controls:ChildWindow.Resources>
<viewmodel:ISizeConvertr x:Name="SizeConvertr"/>
<viewmodel:IDateTimeConvertr x:Name="DateTimeConvertr"/>
</controls:ChildWindow.Resources>
<controls:ChildWindow.DataContext>
<viewmodel:PlanningInfoGanttWindowModel x:Name="planningInfoGanttWindowModel"></viewmodel:PlanningInfoGanttWindowModel>
</controls:ChildWindow.DataContext>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="DataLoadCommand"></i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
<ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<Grid x:Name="LayoutRoot" Margin="2" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="35"/>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<sdk:TabControl Grid.Column="0" Grid.ColumnSpan="6" Grid.Row="3" MinHeight="300">
<sdk:TabItem Header="Plans">
<Border Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="6" Margin="2,5" Style="{StaticResource CornerBorderStyle}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<telerik:RadGanttView ></telerik:RadGanttView>
</Grid>
</Border>
</sdk:TabItem>
</sdk:TabControl>
</Grid>
</ScrollViewer>
Someone Help me?