Content control contents sizing to fill in Silverlight 4 - silverlight

I have a style for a ContentControl which I want to use in places where I currently have a Border. When I use this, the child controls will not stretch to fill and only take a small amount of space. I've tried applying HorizontalAlignment="Stretch" to everything, but it doesn't work. What's wrong?
<Style x:Key="GradientPanel" TargetType="ContentControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Rectangle RadiusY="10" RadiusX="10" Stroke="Black" StrokeThickness="0">
<Rectangle.Effect>
<DropShadowEffect Opacity="0.56" ShadowDepth="1" BlurRadius="3" />
</Rectangle.Effect>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE1EAF3"/>
<GradientStop Color="White" Offset="1"/>
<GradientStop Color="#FFFAFBFD" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Margin="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
Before (works fine):
<Border Style="{StaticResource SearchContainerBorder}" >
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ToggleButton Style="{StaticResource ToggleButtonExpanderStyle}" Grid.Row="0" Grid.Column="1" Height="25" Width ="25" HorizontalAlignment="Center" VerticalAlignment="Top" />
<ContentControl Grid.Row="0" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</Border>
After (replace Border with ContentControl):
<ContentControl Style="{StaticResource GradPanel}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ToggleButton Style="{StaticResource ToggleButtonExpanderStyle}" Grid.Row="0" Grid.Column="1" Height="25" Width ="25" HorizontalAlignment="Center" VerticalAlignment="Top" />
<ContentControl Grid.Row="0" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
</ContentControl>

You need to set the HorizontalContentAlignment="Stretch" and the VerticalContentAlignment="Stretch" settings on your outer ContentControl.
The default behaviour is to NOT stretch the contents of a container.
e.g. the first line should be:
<ContentControl Style="{StaticResource GradPanel}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" >

Related

WPF - Showing specific data for Grid on case of using window style

I have providing a windows style for all of my windows:
Here is what I adding on app.xaml
<Style x:Key="Style.Window.Default" TargetType="Window">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Window">
<Grid Background="{TemplateBinding Background}">
<Grid Name="gridBar" Height="40" VerticalAlignment="Top" Margin="1,0,1,0">
<Grid.Background>
<LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1" Opacity=".1">
<GradientStop Offset="0" Color="{DynamicResource AccentColor}" />
<GradientStop Offset=".3" Color="{DynamicResource AccentColor}" />
<GradientStop Offset="1" Color="Transparent" />
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- title -->
<ItemsControl Background="Transparent" MouseDoubleClick="MaximizeClick" >
<TextBlock Text="{TemplateBinding Title}" Margin="8,8,8,0" x:Name="txtTitle"
Style="{StaticResource ModernWindowTitle}"
/>
</ItemsControl>
</Grid>
<Grid VerticalAlignment="top" Margin="0,40,0,0" Background="White">
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here is what I have on each window:
<Window x:Class="WpfApplication1.MainWindow1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="300" Width="300" Title="title"
Style="{StaticResource Style.Window.Default}" >
<Grid>
<TextBlock Text="text of window 1"></TextBlock>
</Grid>
</Window>
How could I change my code for having or showing data of Grid, because it's not showing data of the Grid
Use a content presenter to insert the content in the ControlTemplate. You never say where you want the content to appear, but this top-aligned grid is empty so maybe that's where?
<Grid VerticalAlignment="top" Margin="0,40,0,0" Background="White">
<ContentPresenter
/>
</Grid>
I have a question for you: What is the purpose of the ItemsControl here?
<!-- title -->
<ItemsControl Background="Transparent" MouseDoubleClick="MaximizeClick" >
<TextBlock Text="{TemplateBinding Title}" Margin="8,8,8,0" x:Name="txtTitle"
Style="{StaticResource ModernWindowTitle}"
/>
</ItemsControl>
Another question: Why do you define four columns in your grid and never use any of them? What are those columns for?

How to bind a line's length to a row's height?

I added a line but i don't know how to set it's location .(Now I just leave it in a canvas) What i'd like to do is binding the lines length = the first row's height(Auto now).
<DataTemplate DataType="{x:Type vm:SettingsViewModel}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="0" Margin="0,0,0,0" >
<!--
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="White"/>
<GradientStop Offset="1" Color="LightGray"/>
</LinearGradientBrush>
</Grid.Background>-->
<Grid>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Background="AliceBlue" BorderThickness="0"></TextBox>
<Border Background="AliceBlue" Grid.Column="1">
<Image Source="/Images/search.png" ></Image>
</Border>
<Canvas Grid.Column="2">
<Line X1="0" Y1="0" X2="0" Y2="10" Stroke="Black"/>
</Canvas>
</Grid>
</Border>
<TreeView Style="{StaticResource ResourceKey=SearchableTreeView}" ItemsSource="{Binding Path=Roots, Mode=OneWay}" Background="Transparent" Grid.Row="1"/>
</Grid>
</DataTemplate>
If you just want a seperator, why dont use a Rectangle instead of Line
<Grid>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="0.1*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Background="AliceBlue" BorderThickness="0"></TextBox>
<Border Background="AliceBlue" Grid.Column="1">
<Image Source="/Images/search.png" ></Image>
</Border>
<Rectangle Grid.Column="2" VerticalAlignment="Stretch" Width="1" Margin="2" Stroke="Black" />
</Grid>

Reference within a ResourceDictionary

I have
<Image x:Name="imgScreenshoot" Margin="2" Source="{Binding Converter={StaticResource ImageConverter1}}" />
within a ResourceDictionary
at the same time it has
<local:ImageConverter x:Key="ImageConverter1" />
In design mode there is no error.
But when I start application I got the error that app. canot resolve reference ImageConverter1.
How do I can fix it? Thank you!
<UserControl.Resources>
<ResourceDictionary>
<DataTemplate x:Key="DataTemplateScreen">
<Border Height="250" Width="250" BorderBrush="#FF3798F1" BorderThickness="2" CornerRadius="5" >
<Grid Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF0F8FE" Offset="0"/>
<GradientStop Color="#FFE0F3FE" Offset="0.3"/>
<GradientStop Color="#FF6FA7C5" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="brdNameActionButtons" Grid.ColumnSpan="3" Margin="0">
<Grid.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFDCF0FA" Offset="0"/>
<GradientStop Color="#FFC5E6F7" Offset="0.2"/>
<GradientStop Color="#FF297CCA" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<TextBlock x:Name="txbName" Text="{Binding Name}" Margin="2" Grid.Row="0" FontWeight="Bold" FontSize="12" Grid.Column="0" HorizontalAlignment="Left" Foreground="Black" FontFamily="Segoe UI" />
<TextBlock x:Name="txbUpdated" Text="{Binding Screenshot.Refreshed}" Margin="2" Grid.Row="0" FontWeight="Bold" FontSize="12" Grid.Column="0" HorizontalAlignment="Right" Foreground="Black" FontFamily="Segoe UI" />
</Grid>
<Border x:Name="brdScreenshoot" Grid.Column="2" Margin="2" Grid.Row="3" CornerRadius="5" >
<Grid >
<Image x:Name="imgScreenshoot" Margin="2" Source="{Binding Converter={StaticResource ImageConverter1}}" />
</Grid>
</Border>
<StackPanel Grid.Column="2" Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,2">
<Button Content="Play" HorizontalAlignment="Center" Height="23" Margin="0,0,0,0" VerticalAlignment="Bottom" Width="42" Grid.Row="1"/>
<Button Content="Stop" HorizontalAlignment="Center" Height="23" Margin="2,0,0,0" VerticalAlignment="Bottom" Width="42" Grid.Row="1"/>
<Button Content="Cancel" HorizontalAlignment="Center" Height="23" Margin="2,0,0,0" VerticalAlignment="Bottom" Width="42" Grid.Row="1"/>
<Button Content="Refresh" HorizontalAlignment="Center" Height="23" Margin="10,0,0,0" VerticalAlignment="Bottom" Width="42" Grid.Row="1"/>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
<ItemsPanelTemplate x:Key="MonitorPlayersItemsPaneltemplate">
<toolkit:WrapPanel/>
</ItemsPanelTemplate>
<local:ImageConverter x:Key="ImageConverter1" />
</ResourceDictionary>
</UserControl.Resources>
Declare the converter higher up, before it is used.

no template property on grid style in WPF?

i want to move all the content of a Grid to a style/template/Container (don't know which one to choose...), but I tried to move it to a Style.
but the problem is I get the error :
"Cannot find the Style Property 'Template' on the type
'System.Windows.Controls.Grid'"
i know there is no Template property for Grid , but how else will I move the grid content to the ResourceDirectory file?
This is the Grid code:
<Grid Grid.Column="0" Grid.Row="0" Margin="10,15,5,5" >
<Border BorderThickness="7" CornerRadius="4">
<Border.BorderBrush>
<SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
</Border.BorderBrush>
<Grid>
<Grid.Background>
<SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Button Name="CustomerButton" Grid.Row="1" Grid.Column="0" Width="40" Height="40" Content="Customer" Click="CustTabButton_Click" ></Button>
<Button Name="BossButton" Grid.Row="1" Width="40" Height="40" Content="Boss" Margin="23,206,23,114" Click="BossTabButton_Click"></Button>
</Grid>
</Border>
</Grid>
This is the code in the resourceDirectory after i move the code there:
<Style x:Key="LeftSidePanel" TargetType="{x:Type Grid}">
<Setter Property="Margin" Value="10,15,5,5" />
<Setter Property="Template">
<Setter.Value>
<Border BorderThickness="7" CornerRadius="4">
<Border.BorderBrush>
<SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
</Border.BorderBrush>
<Grid>
<Grid.Background>
<SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Button Name="CustomerButton" Grid.Row="1" Grid.Column="0" Width="40" Height="40" Content="Customer" Click="CustTabButton_Click"></Button>
<Button Name="BossButton" Grid.Row="1" Width="40" Height="40" Content="Boss" Margin="23,206,23,114" Click="BossTabButton_Click"></Button>
</Grid>
</Border>
</Setter.Value>
</Setter>
</Style>
What did i miss?
ContentControl is what you are looking for -
<ContentControl Template="{StaticReosurce MyTemplate}">
Declare your template in the resource dictionary like this -
<ControlTemplate>
<Grid Grid.Column="0" Grid.Row="0" Margin="10,15,5,5" >
<Border BorderThickness="7" CornerRadius="4">
<Border.BorderBrush>
<SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
</Border.BorderBrush>
<Grid>
<Grid.Background>
<SolidColorBrush Color="#73B2F5" Opacity="0.5"/>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Button Name="CustomerButton" Grid.Row="1" Grid.Column="0" Width="40" Height="40" Content="Customer" Click="CustTabButton_Click" ></Button>
<Button Name="BossButton" Grid.Row="1" Width="40" Height="40" Content="Boss" Margin="23,206,23,114" Click="BossTabButton_Click"></Button>
</Grid>
</Border>
</Grid>
</ControlTemplate>
If you aren't aware of ContentControl, follow this link -
https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.contentcontrol

Why does my TextBox with custom control template not have a visible text cursor?

I have a custom control template which is set via the style property on a TextBox. The visual poperties are set correctly, even typing to the textbox works, but there is no insertion cursor (the | symbol) visible which makes editing challenging for our users.
How does the control template need changing to get the traditional TextBox behavior back?
<Style x:Key="DemandEditStyle" TargetType="TextBox">
<EventSetter Event="LostFocus" Handler="DemandLostFocus" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="White" Offset="0.15" />
<GradientStop Color="#EEE" Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Background="Black" />
<Border Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" Background="Black" />
<Grid Grid.Row="0" Grid.Column="0" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="1" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1" />
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Background="Black" />
<Border Grid.Row="0" Grid.Column="0" Grid.RowSpan="3" Background="Black" />
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Background="#CCC" />
<Border Grid.Row="0" Grid.Column="2" Grid.RowSpan="3" Background="#CCC" />
<TextBlock Grid.Row="1" Grid.Column="1"
TextAlignment="Right" HorizontalAlignment="Center" VerticalAlignment="Center"
Padding="3 0 3 0" Background="Yellow"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text}"
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}, AncestorLevel=1}, Path=ActualWidth}" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Update: Replacing the inner-most TextBox with a ScrollViewer and naming it PART_ContentHost indeed shows the text insertion cursor.
I suppose the reason is that your template lacks an element called PART_ContentElement. As stated here, an element with that name is used to display the content of the TextBox. However, in the v3.5 version of this document, the element is called PART_ContentHost and is further restricted to be a ScrollViewer or an AdornerDecorator.
You should base your Style on the old Style of TextBox:
<Style x:Key="DemandEditStyle" TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">

Resources