Related
I have created a custom control that utilizes pre-existing WPF controls. Inside the control I made some borders that visually separates the individual elements.
Here's the XAML code for the UserControl: TimeEntry:
<UserControl
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"
mc:Ignorable="d"
x:Class="ClockWatcher.TimeEntry"
x:Name="UserControl"
d:DesignWidth="365" d:DesignHeight="40" VerticalAlignment="Top" HorizontalAlignment="Left">
<UserControl.Resources>
<Thickness x:Key="borderDim">0,0,1,0</Thickness>
<Thickness x:Key="labelPadding">2,0</Thickness>
<Color x:Key="borderColor">#FF151E3E</Color>
<Color x:Key="buttonColorBackground">#FFB3D6E6</Color>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" HorizontalAlignment="Left" VerticalAlignment="Top">
<Border x:Name="mainBorder" BorderThickness="3" CornerRadius="1" Padding="1" Background="#FF9DB6BF" HorizontalAlignment="Left" VerticalAlignment="Top">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</Border.BorderBrush>
<Grid x:Name="borderGrid">
<StackPanel x:Name="mainStack" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top">
<Border x:Name="timeInBorder" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="{DynamicResource borderDim}" Padding="{DynamicResource labelPadding}">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</Border.BorderBrush>
<StackPanel x:Name="timeInStack" Orientation="Vertical" Height="31.92" Width="50.46">
<Label x:Name="timeInLabel" Content="Time In" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}" BorderThickness="0,0,0,1">
<Label.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</Label.BorderBrush>
</Label>
<TextBlock x:Name="timeInBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding timeIn.TimeOfDay, ElementName=UserControl}" VerticalAlignment="Top"/>
</StackPanel>
</Border>
<Border x:Name="timeOutBorder" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="{DynamicResource borderDim}" Padding="{DynamicResource labelPadding}">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</Border.BorderBrush>
<StackPanel x:Name="timeOutStack" Orientation="Vertical" Height="31.92" Width="54.46">
<Label x:Name="timeOutLabel" Content="Time Out" HorizontalAlignment="Left" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}" BorderThickness="0,0,0,1">
<Label.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</Label.BorderBrush>
</Label>
<TextBlock x:Name="timeOutBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding timeOut.TimeOfDay, ElementName=UserControl}" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}"/>
</StackPanel>
</Border>
<Border x:Name="timeSpentBorder" HorizontalAlignment="Center" VerticalAlignment="Center" BorderThickness="{DynamicResource borderDim}" Padding="{DynamicResource labelPadding}">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</Border.BorderBrush>
<StackPanel x:Name="timeSpentStack" Orientation="Vertical" Height="31.92" Width="63.653">
<Label x:Name="timeSpentLabel" Content="Time Spent" HorizontalAlignment="Left" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}" BorderThickness="0,0,0,1">
<Label.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</Label.BorderBrush>
</Label>
<TextBlock x:Name="timeSpentBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding timeSpent,ElementName=UserControl}" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}"/>
</StackPanel>
</Border>
<Button x:Name="alarmButton" Content="Alarm" HorizontalAlignment="Center" BorderThickness="0,0,1,0">
<Button.Background>
<SolidColorBrush Color="{DynamicResource buttonColorBackground}"/>
</Button.Background>
<Button.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</Button.BorderBrush>
</Button>
<StackPanel x:Name="commentStack1" Orientation="Horizontal">
<TextBox x:Name="commentBox" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding comment,ElementName=UserControl}" VerticalAlignment="Top" Padding="{DynamicResource labelPadding}" BorderThickness="0" SourceUpdated="commentBox_SourceUpdated">
<TextBox.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</TextBox.BorderBrush>
</TextBox>
<Button x:Name="commentButton" VerticalAlignment="Top" Content="Ad" BorderThickness="1,0" Padding="{DynamicResource labelPadding}">
<Button.Background>
<SolidColorBrush Color="{DynamicResource buttonColorBackground}"/>
</Button.Background>
<Button.BorderBrush>
<SolidColorBrush Color="{DynamicResource borderColor}"/>
</Button.BorderBrush>
</Button>
</StackPanel>
<Button x:Name="deleteButton" Content="X" Padding="{DynamicResource labelPadding}" HorizontalAlignment="Left" VerticalAlignment="Top" BorderBrush="{x:Null}" BorderThickness="{DynamicResource borderDim}">
<Button.Background>
<SolidColorBrush Color="{DynamicResource buttonColorBackground}"/>
</Button.Background>
</Button>
</StackPanel>
</Grid>
</Border>
</Grid>
</UserControl>
In Blend, or the designer view in VS2013, the borders will appear just fine. However, when I place an instance of this control into a grid in the MainWindow, the borders won't appear.
All I do is this in MainWindow:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ClockWatcher" x:Class="ClockWatcher.MainWindow"
Title="MainWindow" Height="554" Width="949">
<Window.Resources>
<UserControl x:Key="timeEntry"/>
</Window.Resources>
<Grid x:Name="mainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250*"/>
<ColumnDefinition Width="445*"/>
<ColumnDefinition Width="246*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="leftGrid" Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
<Grid x:Name="rightGrid" Grid.Column="2">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
<ScrollViewer x:Name="timeEntryList" Grid.Column="1" HorizontalAlignment="Left">
<StackPanel x:Name="scrollStack" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left">
<local:TimeEntry/>
</StackPanel>
</ScrollViewer>
</Grid>
</Window>
Can someone help me find out what I did wrong here? I've been reading a book to find out about dependency objects and dependency properties, which I've also added the UserControl, but I'm not sure what's really wrong with it right now.
Declare all these resources in App.xaml and it will work,
<Application.Resources>
<Thickness x:Key="borderDim">0,0,1,0</Thickness>
<Thickness x:Key="labelPadding">2,0</Thickness>
<Color x:Key="borderColor">#FF151E3E</Color>
<Color x:Key="buttonColorBackground">#FFB3D6E6</Color>
</Application.Resources>
I have a Window with a Stack Panel and Frame. The Stack Panel holding my menus. On selecting menus, am loading my UserControls within the Frame.
But problem is the UserControl is displaying in the center of the Frame and not maximized.
Can anyone help me to maximize my UserControl to the width of the Frame and Resize all the controls within the UserControl?
Here is my xaml files...
UserControl:
<UserControl x:Class="PosWp.Categorys"
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"
HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
d:DesignHeight="400" d:DesignWidth="700" Loaded="UserControl_Loaded">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ButtonStyleDictionary.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="700">
<StackPanel Margin="0,0,0,0" Height="Auto" Width="Auto">
<TabControl Name="Tabs1" TabStripPlacement="top" BorderThickness="0" BorderBrush="#CC684331" Margin="0,0,0,0">
<TabControl.Background>
<RadialGradientBrush>
<GradientStop Color="Gray" Offset="0"/>
<GradientStop Color="Gray" Offset="0"/>
<GradientStop Color="Gray" Offset="0"/>
<GradientStop Color="Gray" Offset="0"/>
</RadialGradientBrush>
</TabControl.Background>
<TabItem Header="Category" Name="GridCat" IsSelected="False" Visibility="Hidden">
<Grid Height="280" Width="671">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="200*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="23"></RowDefinition>
<RowDefinition Height="34" />
<RowDefinition Height="143" />
<RowDefinition Height="50*"></RowDefinition>
</Grid.RowDefinitions>
<DataGrid IsReadOnly="True" AutoGenerateColumns="False" AlternatingRowBackground="Beige" Height="142" Grid.ColumnSpan="2" FontWeight="Bold" HorizontalAlignment="Center" Margin="0,0,206,0" Name="dgCategory" VerticalAlignment="Top" Width="460" Grid.RowSpan="3" SelectionChanged="dgCategory_SelectionChanged">
<DataGrid.Columns>
<DataGridTextColumn Binding="{Binding Path=CategoryCode}" Header="Category" Width="200" ></DataGridTextColumn>
<DataGridTextColumn Binding="{Binding Path=Categoryname}" Header="CategoryName" Width="250" ></DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
<Button x:Name="Create" Template="{StaticResource Create}" Height="30" HorizontalAlignment="Left" Grid.Row="3" Margin="40,0,0,0" Click="Create_Click" VerticalAlignment="Top" Width="75" />
<Button x:Name="Edit" Template="{StaticResource Edit}" Height="30" HorizontalAlignment="Left" Grid.Row="3" Margin="120,0,0,0" Click="Edit_Click" VerticalAlignment="Top" Width="75" />
<Button x:Name="Delete" Template="{StaticResource Delete}" Height="30" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="1" Click="Delete_Click" Margin="0,0,0,0" VerticalAlignment="Top" Width="75" />
<Button x:Name="Exit" Template="{StaticResource Exit}" Height="30" HorizontalAlignment="Left" Grid.Row="3" Grid.Column="1" Click="Exit_Click" Margin="80,0,0,0" VerticalAlignment="Top" Width="78" />
<Label Content="Category Master" FontWeight="Bold" Grid.ColumnSpan="2" Height="28" HorizontalAlignment="Left" Margin="167,-39,0,0" Name="lblgrid" VerticalAlignment="Top" Width="136" />
</Grid>
</TabItem>
<TabItem Header="Category" Name="Cat" Visibility="Hidden">
<Grid Height="280" Width="689">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="180"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="70"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Label Content="CategoryCode" FontWeight="Bold" FontSize="12" Name="lblCatcode" Width="110" Margin="0,29,0,16" Height="25" HorizontalAlignment="Right"></Label>
<Label Content="CategoryName" FontWeight="Bold" FontSize="12" Grid.Row="1" Name="lblCatName" Width="110" Margin="0,22,0,23" HorizontalAlignment="Right"></Label>
<TextBox Name="txtCatcode" Grid.Column="1" Width="170" HorizontalAlignment="Left" Margin="0,28,0,17" Height="25"></TextBox>
<TextBox Name="txtCatName" Grid.Column="1" Grid.Row="1" Width="170" HorizontalAlignment="Left" Margin="0,22,0,0" Height="25" VerticalAlignment="Top"></TextBox>
<Button x:Name="Save" Template="{StaticResource Save}" Grid.Column="1" Grid.Row="2" Margin="5,0,0,0" HorizontalAlignment="Left" Click="Save_Click" Width="85" Height="30" ></Button>
<Button x:Name="Update" Template="{StaticResource Update}" Visibility="Hidden" Grid.Column="1" Grid.Row="2" Margin="5,0,0,0" Click="Update_Click" HorizontalAlignment="Left" Width="85" Height="30" ></Button>
<Button x:Name="Remove" Template="{StaticResource Remove}" Visibility="Hidden" Grid.Column="1" Grid.Row="2" Margin="5,0,0,0" Click="Remove_Click" HorizontalAlignment="Left" Width="85" Height="30"></Button>
<Button x:Name="Close" Template="{StaticResource Close}" Grid.Column="1" Grid.Row="2" Margin="95,0,0,0" HorizontalAlignment="Left" Height="30" Click="Close_Click" Width="85"></Button>
<Label Content="Category Master" FontWeight="Bold" Grid.ColumnSpan="2" Height="28" HorizontalAlignment="Left" Margin="167,-39,0,0" Name="lblcategory" VerticalAlignment="Top" />
</Grid>
</TabItem>
</TabControl>
</StackPanel>
</ScrollViewer>
</UserControl>
Window xaml:
<Window x:Class="PosWp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="650" ResizeMode="CanResize" WindowState="Maximized" WindowStartupLocation="CenterScreen">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Background" Value="CornflowerBlue" />
<Setter Property="Height" Value="22" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Height="{TemplateBinding Height}">
<Grid.RowDefinitions>
<RowDefinition Height="1.8*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Grid.RowSpan="2" RadiusX="7" RadiusY="7" Fill="{TemplateBinding Background}">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Black" />
<GradientStop Offset="1" Color="HotPink" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle Margin="3,1" RadiusX="3" RadiusY="3">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#dfff" />
<GradientStop Offset="1" Color="#0fff" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter Grid.RowSpan="3" Margin="13,2,13,4" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Grid.Background>
<RadialGradientBrush>
<GradientStop Color="#FFF3F3F3" Offset="0"/>
<GradientStop Color="#FFEBEBEB" Offset="0"/>
<GradientStop Color="#FFDDDDDD" Offset="0"/>
<GradientStop Color="#FF28BCE6" Offset="0"/>
</RadialGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="321*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<ScrollViewer Grid.Column="0" Height="Auto" Width="Auto" >
<StackPanel Grid.Column="0" Height="Auto" Orientation="Vertical" ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel HorizontalAlignment="Left" Grid.Column="0" Height="Auto" Width="220" >
<Expander Header="Master" HorizontalAlignment="Left" Grid.Column="0" FontWeight="Bold" Width="200" Height="Auto" >
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Auto" >
<StackPanel HorizontalAlignment="Left" Height="Auto" Width="200" >
<Button Content="Category" Margin="10,0,0,0" Name="btnMasCat" Click="btnMasCat_Click"/>
<Button Content="Department" Margin="10,0,0,0" Name="btnMasDep" Click="btnMasDep_Click" />
<Button Content="Employee" Margin="10,0,0,0" Name="btnMasEmp" Click="btnMasEmp_Click" />
<Button Content="Kitchen" Margin="10,0,0,0" Name="btnMasKit" Click="btnMasKit_Click"/>
<Button Content="PayMode" Margin="10,0,0,0" Name="btnMasPay" Click="btnMasPay_Click"/>
<Button Content="Modifier" Margin="10,0,0,0" Name="btnMasMod" Click="btnMasMod_Click"/>
<Button Content="PosMaster" Margin="10,0,0,0" Name="btnMasPos" Click="btnMasPos_Click"/>
<Button Content="Session" Margin="10,0,0,0" Name="btnMasSession" Click="btnMasSession_Click"/>
<Button Content="Table" Margin="10,0,0,0" Name="btnMasTable" Click="btnMasTable_Click"/>
<Button Content="Tax" Margin="10,0,0,0" Name="btnMasTax" Click="btnMasTax_Click"/>
<Button Content="Discount" Margin="10,0,0,0" Name="btnMasDis" Click="btnMasDis_Click"/>
<Button Content="ItemMaster" Margin="10,0,0,0" Name="btnMasItem" Click="btnMasItem_Click"/>
<Button Content="Shift" Margin="10,0,0,0" Name="btnMasShift" Click="btnMasShift_Click"/>
<Button Content="User" Margin="10,0,0,0" Name="btnMasUser" Click="btnMasUser_Click"/>
<Button Content="RoomMaster" Margin="10,0,0,0" Name="btnMasRoom" Click="btnMasRoom_Click"/>
<Button Content="Unit" Margin="10,0,0,0" Name="btnMasUnit" Click="btnMasUnit_Click"/>
</StackPanel>
</StackPanel>
</Expander>
<Expander Header="Transaction" HorizontalAlignment="Left" FontWeight="Bold" Width="200" Height="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel HorizontalAlignment="Left" Width="200" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Button Content="BookigTable" Margin="10,0,0,0" Name="btnBooking" Click="btnBooking_Click"/>
<Button Content="Button B" Margin="10,0,0,0" />
<Button Content="Button C" Margin="10,0,0,0" />
<Button Content="Button D" Margin="10,0,0,0" />
<Button Content="Button E" Margin="10,0,0,0" />
</StackPanel>
</StackPanel>
</Expander>
<Expander Header="Report" HorizontalAlignment="Left" FontWeight="Bold" Width="200" ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel ScrollViewer.VerticalScrollBarVisibility="Auto">
<StackPanel HorizontalAlignment="Left" Width="200" ScrollViewer.VerticalScrollBarVisibility="Auto">
<Button Content="Category" Margin="10,0,0,0" Name="btnRepCat" Click="btnRepCat_Click"/>
<Button Content="Department" Margin="10,0,0,0" Name="btnRepDep" Click="btnRepDep_Click"/>
<Button Content="Employee" Margin="10,0,0,0" Name="btnRepEmp" Click="btnRepEmp_Click"/>
<Button Content="Kitchen" Margin="10,0,0,0" Name="btnRepKit" Click="btnRepKit_Click"/>
<Button Content="PayMode" Margin="10,0,0,0" Name="btnRepPay" Click="btnRepPay_Click"/>
<Button Content="Modifier" Margin="10,0,0,0" Name="btnRepMod" Click="btnRepMod_Click"/>
<Button Content="PosMaster" Margin="10,0,0,0" Name="btnRepPos" Click="btnRepPos_Click"/>
<Button Content="Session" Margin="10,0,0,0" Name="btnRepsession" Click="btnRepsession_Click"/>
<Button Content="Table" Margin="10,0,0,0" Name="btnRepTable" Click="btnRepTable_Click"/>
<Button Content="Tax" Margin="10,0,0,0" Name="btnRepTax" Click="btnRepTax_Click"/>
<Button Content="Discount" Margin="10,0,0,0" Name="btnRepDis" Click="btnRepDis_Click"/>
<Button Content="ItemMaster" Margin="10,0,0,0" Name="btnRepItem" Click="btnRepItem_Click"/>
<Button Content="Shift" Margin="10,0,0,0" Name="btnRepShift" Click="btnRepShift_Click"/>
<Button Content="User" Margin="10,0,0,0" Name="btnRepUser" Click="btnRepUser_Click"/>
<Button Content="RoomMaster" Margin="10,0,0,0" Name="btnRepRoom" Click="btnRepRoom_Click"/>
<Button Content="Unit" Margin="10,0,0,0" Name="btnRepUnit" Click="btnRepUnit_Click"/>
</StackPanel>
</StackPanel>
</Expander>
</StackPanel>
</StackPanel>
</ScrollViewer>
<Frame Grid.Column="1" NavigationUIVisibility="Hidden" Margin="0,0,0,0" Name="frame1" >
<Frame.Background>
<RadialGradientBrush >
<GradientStop Color="#FFF3F3F3" Offset="0"/>
<GradientStop Color="#FFEBEBEB" Offset="0"/>
<GradientStop Color="#FFDDDDDD" Offset="0"/>
<GradientStop Color="#FF28BCE6" Offset="0"/>
</RadialGradientBrush>
</Frame.Background>
</Frame>
</Grid>
</Window>
When you set the Content of frame1 to the instance of your UserControl, it will take the size of the frame. The reason why you feel it is not maximized is because you have set the height and width of your elements within your UserControl (like the ScrollViewer width). Just set the Background of your UserControl to some color and at runtime you will see that it takes the size of the frame. But the content within the usercontrol is not taking the size of the usercontrol.
WPF layout is not same as Winforms and it is not a good practice to set the height and width of all your control exclusively. The controls render themselves according to their content.
I have the following xaml and I am trying to get to the Grid to make it invisible at some point in my code if the code reaches there. Being new to .net and silverlight and xaml I am not sure why my code behind doesn't find Grid Controlpanel
please see my xaml code here
<UserControl 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:smf="clr-namespace:Microsoft.SilverlightMediaFramework.Core;assembly=Microsoft.SilverlightMediaFramework.Core" xmlns:smfm="clr-namespace:Microsoft.SilverlightMediaFramework.Core.Media;assembly=Microsoft.SilverlightMediaFramework.Core" xmlns:plugins3d="clr-namespace:Microsoft.SilverlightMediaFramework.Plugins.Primitives.S3D;assembly=Microsoft.SilverlightMediaFramework.Plugins" xmlns:Microsoft_SilverlightMediaFramework_Utilities_Offline="clr-namespace:Microsoft.SilverlightMediaFramework.Utilities.Offline;assembly=Microsoft.SilverlightMediaFramework.Utilities" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:smf_util="http://schemas.microsoft.com/smf/2010/xaml/converters" xmlns:smf_accesscontrols="http://schemas.microsoft.com/smf/2010/xaml/accesscontrols" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
x:Class="SPlayer.MainPage"
d:DesignHeight="300" d:DesignWidth="400" mc:Ignorable="d">
<UserControl.Resources>
................
................
<Style x:Key="SMFPlayerStyle1" TargetType="smf:SMFPlayer">
<Setter Property="Background" Value="Black"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="Template">
.......
......
<Grid x:Name="ControlPanelGrid" Margin="8,-26,8,13" Grid.Row="1" Grid.RowSpan="4" Opacity="0">
<Rectangle x:Name="ControlPanel" Margin="2,3,3,5" Stroke="#FF474747" RadiusY="4" RadiusX="4" Opacity="0.9" StrokeThickness="0.5">
<Rectangle.Effect>
<DropShadowEffect Opacity="0.26" BlurRadius="7" Direction="319"/>
</Rectangle.Effect>
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF191919" Offset="0.936"/>
<GradientStop Color="#FF454545" Offset="0.187"/>
<GradientStop Color="#FF191919"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid x:Name="timelinecontrols" Grid.ColumnSpan="1" Margin="0,0,165,13" d:LayoutOverrides="GridBox" d:IsHidden="True">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<smf:Timeline x:Name="TimelineElement" Cursor="Hand" Chapters="{TemplateBinding Chapters}" EndPosition="{TemplateBinding EndPosition}" Foreground="{x:Null}" HorizontalContentAlignment="Stretch" IsLive="{TemplateBinding IsMediaLive}" LivePosition="{TemplateBinding LivePosition}" Margin="80,0,170,-10" StartPosition="{TemplateBinding StartPosition}" TimelineMarkers="{TemplateBinding TimelineMarkers}" VerticalAlignment="Center" Style="{StaticResource TimelineStyle1}" />
<Border x:Name="TimeContainer" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Left" Margin="0" Opacity="0">
<Grid Height="28" MaxHeight="28" MinWidth="60" MinHeight="28" UseLayoutRounding="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.25*"/>
<ColumnDefinition Width="0.367*"/>
<ColumnDefinition Width="0.383*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="CurrentPositionElement" Foreground="#FFC1C1C1" FontSize="9" HorizontalAlignment="Left" Padding="8,0,0,0" TextAlignment="Center" Text="{Binding PlaybackPosition, Converter={StaticResource TimeSpanValueConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center"/>
<TextBlock x:Name="TimeSeparatorElement" Grid.Column="1" Foreground="#FFFDFAFA" FontSize="9" HorizontalAlignment="Center" Margin="3,0" Opacity="0.4" Text="|" VerticalAlignment="Center"/>
<TextBlock x:Name="CurrentDurationElement" Grid.Column="2" Foreground="#FFFDFDFD" FontSize="9" HorizontalAlignment="Left" Opacity="0.4" Padding="0,0,8,0" Text="{Binding EndPosition, Converter={StaticResource TimeSpanValueConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="Center"/>
</Grid>
</Grid>
</Border>
</Grid>
<Image x:Name="btnVloume" Margin="0,-1,383,5" Source="volume.png" Stretch="Fill" Height="49" d:LayoutOverrides="Width, GridBox" Width="53" HorizontalAlignment="Right" d:IsHidden="True"/>
<smf:VolumeControl x:Name="VolumeElement" VolumeLevel=".5" RenderTransformOrigin="0.5,0.5" Margin="0,-46.5,326.074,-50.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Right" Width="36" Style="{StaticResource VolumeControlStyle1}" d:IsHidden="True" >
<smf:VolumeControl.RenderTransform>
<CompositeTransform Rotation="90.02"/>
</smf:VolumeControl.RenderTransform>
</smf:VolumeControl>
<ToggleButton x:Name="FullScreenToggleElement" BorderThickness="0" Cursor="Hand" HorizontalAlignment="Right" HorizontalContentAlignment="Stretch" Height="28" Margin="0,14,153,11" Padding="0" Style="{StaticResource FullScreenElementStyle}" VerticalContentAlignment="Stretch" Width="29" d:LayoutOverrides="HorizontalAlignment" Opacity="0"/>
<Image x:Name="_3D" HorizontalAlignment="Right" Margin="0,1,180,3" Source="3D.png" Stretch="Fill" Width="53" Height="49" Cursor="Hand" Opacity="0.8" MouseLeftButtonUp="_3D_MouseLeftButtonUp">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction x:Name="_3d_100_Opacity" PropertyName="Opacity" Value="1"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction x:Name="_3d_80_Opacity" PropertyName="Opacity" Value="0.8"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
<Image x:Name="analytics" HorizontalAlignment="Left" Margin="980,3,0,-1" Source="analytics.png" Stretch="Fill" Width="53" Cursor="Hand" Opacity="0.7">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction x:Name="analytics_MouseEnter" PropertyName="Opacity" Value="1"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction x:Name="analytics_MouseLeave" PropertyName="Opacity" Value="0.7"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
<Image x:Name="btn_fullscreen" HorizontalAlignment="Right" Margin="0,0,140,4" Source="full_screen.png" Stretch="Fill" Width="53" Height="49" Opacity="0.8" Cursor="Hand">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction x:Name="btn_fullscreen_mouseOver" PropertyName="Opacity" Value="1"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:ChangePropertyAction x:Name="btn_fullscreen_mouseOut" PropertyName="Opacity" Value="0.8"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Image>
<smf:PlayElement x:Name="PlayElement" Content="PlayElement" PlayState="{TemplateBinding PlayState}" HorizontalAlignment="Left" Height="51" Margin="9,2,0,0" Style="{StaticResource PlayElementStyle1}" Width="53" Cursor="Hand" />
<Image Margin="0,4,5,8" Source="logo.png" Stretch="Fill" HorizontalAlignment="Right" Width="96"/>
</Grid>
<Grid x:Name="ControllerContainer" Height="40" Grid.Row="4" Visibility="{Binding IsControlStripVisible, Converter={StaticResource BoolToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0">
<Grid.Background>
<LinearGradientBrush EndPoint="0.481481,1" StartPoint="0.481481,0.00636957">
<GradientStop Color="#FF78808B" Offset="0"/>
<GradientStop Color="#FF58606A" Offset="0.287958"/>
<GradientStop Color="#FF38424E" Offset="0.680628"/>
<GradientStop Color="#FF333D49" Offset="0.984293"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid x:Name="playercontrols" Grid.ColumnSpan="1" Margin="19,0,16,0" Opacity="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="ReplayElement" BorderThickness="0" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource ReplayButtonStyle}" Width="36"/>
<Button x:Name="RewindElement" BorderThickness="0,1,0,0" Grid.Column="1" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource RWButtonStyle}" Width="36">
<Button.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Button.BorderBrush>
</Button>
<smf:PlayElement Cursor="Hand" Grid.Column="2" Margin="0" PlayState="{TemplateBinding PlayState}" Width="60"/>
<Button x:Name="FastForwardElement" BorderThickness="0" Grid.Column="3" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource FFButtonStyle}" Width="36"/>
<ToggleButton x:Name="SlowMotionElement" Grid.Column="4" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource SlowMotionButtonStyle}" ToolTipService.ToolTip="Slow Motion" Width="36"/>
</Grid>
<Grid x:Name="divider1" Grid.Column="1" HorizontalAlignment="Left" Width="2">
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Margin="1,0,0,0" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFDFEFF" Offset="0.509"/>
<GradientStop Color="#FF36404C" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
<Grid x:Name="divider2" Grid.Column="3" HorizontalAlignment="Left" Width="2" Opacity="0">
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Margin="1,0,0,0" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFDFEFF" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0.009"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
<Grid x:Name="functioncontrols" Grid.ColumnSpan="1" Grid.Column="4" Margin="16,0" Opacity="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<ToggleButton x:Name="CaptionToggleElement" Cursor="Hand" Content="CC" Grid.Column="0" HorizontalAlignment="Right" Height="28" Margin="0" Style="{StaticResource CaptionDisplayToggleButtonStyle}" ToolTipService.ToolTip="Closed Captions" Width="36" d:LayoutOverrides="GridBox"/>
<ToggleButton x:Name="GraphToggleElement" Cursor="Hand" Content="G" Grid.Column="1" Height="28" Style="{StaticResource PlayerGraphButtonStyle}" ToolTipService.ToolTip="Toggle Graph" Width="36"/>
<ComboBox x:Name="AudioStreamSelectionElement" BorderBrush="{StaticResource btnBaseGradient}" Background="Black" Cursor="Hand" Grid.ColumnSpan="1" Grid.Column="3" Foreground="Black" HorizontalAlignment="Right" Height="28" ItemsSource="{TemplateBinding AvailableAudioStreams}" Margin="0" Style="{StaticResource AudioStreamMenu}" SelectedItem="{TemplateBinding SelectedAudioStream}" Width="110">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Foreground="{StaticResource iconGradient}" Text="{Binding Name}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid>
<Grid x:Name="divider3" Grid.Column="5" HorizontalAlignment="Left" Height="40" Margin="0" Width="2" Opacity="0">
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
<Path Data="M245.16667,0 L245.16667,39.109009" HorizontalAlignment="Left" Margin="1,0,0,0" Stretch="Fill" UseLayoutRounding="False" Width="1">
<Path.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFDFEFF" Offset="0.509"/>
<GradientStop Color="#FF343E4A" Offset="1"/>
<GradientStop Color="#FF757D87" Offset="0"/>
</LinearGradientBrush>
</Path.Stroke>
</Path>
</Grid>
<smf:BitrateMonitor x:Name="BitrateMonitorElement" Grid.Column="6" HighDefinitionBitrate="{TemplateBinding HighDefinitionBitrate}" Height="40" Margin="5,0,7,0" MaximumPlaybackBitrate="{TemplateBinding MaximumPlaybackBitrate}" PlaybackBitrate="{TemplateBinding PlaybackBitrate}" Width="36" Opacity="0"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<smf:SMFPlayer x:Name="smfPlayer" Style="{StaticResource SMFPlayerStyle1}" PlaylistVisibility="Disabled"/>
</Grid>
</UserControl>
here is my code behind file
namespace SPlayer
{
public partial class MainPage : UserControl
{
.........
public MainPage(StartupEventArgs e)
{
......
as you can see my namespace is correct in xaml but I still cant access the grid <Grid x:Name="ControlPanelGrid" Margin="8,-26,8,13" Grid.Row="1" Grid.RowSpan="4" Opacity="0">
thanks
In your C# code you can use the FindChild<T> found in this SO question
It would look something like:
Grid controlPanelGrid = UIHelper.FindChild<Grid>(smfPlayer, "ControlPanelGrid");
For clarification: your Grid ControlPanelGrid is a child of SMFPlayerStyle1 in the resources of your UserControl?
<UserControl.Resources>
<Style x:Key="SMFPlayerStyle1" TargetType="smf:SMFPlayer">
[...]
<Grid x:Name="ControlPanelGrid" Margin="8,-26,8,13" Grid.Row="1" Grid.RowSpan="4" Opacity="0">
[...]
</Style>
</UserControl.Resources>
To access this element programatically, you need to dive down the object graph starting with SMFPlayerStyle1.... Depending on structure of the SMFPlayer object you may be able to access it through a property of this.
Here's my XAML and how it looks like:
<Window x:Class="GameLenseWpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="450" Width="350" MinHeight="450" MinWidth="350">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.15*" />
<RowDefinition />
</Grid.RowDefinitions>
<Image Grid.Row="0" Stretch="Fill" Source="Image/topBarBg.png" />
<StackPanel Orientation="Horizontal" Grid.Row="0">
<TextBlock Text="Platform"
Foreground="White"
FontFamily="Georgia"
FontSize="15"
Margin="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<ComboBox x:Name="cmbPlatform"
Margin="10"
FontFamily="Georgia"
FontSize="15"
MinHeight="30"
MinWidth="140"
VerticalAlignment="Center"
VerticalContentAlignment="Center" SelectionChanged="cmbPlatform_SelectionChanged">
<ComboBoxItem>All Platforms</ComboBoxItem>
<ComboBoxItem>Playstation 3</ComboBoxItem>
<ComboBoxItem>XBox 360</ComboBoxItem>
<ComboBoxItem>Wii</ComboBoxItem>
<ComboBoxItem>PSP</ComboBoxItem>
<ComboBoxItem>DS</ComboBoxItem>
</ComboBox>
</StackPanel>
<Image x:Name="imgAbout" Grid.Row="0" Source="Image/about.png"
Height="16" HorizontalAlignment="Right"
VerticalAlignment="Center"
Margin="0 0 10 0" />
<ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
HorizontalContentAlignment="Stretch">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<!-- SelectedItem with focus -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent" />
<!-- SelectedItem without focus -->
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}"
Color="Transparent" />
<!-- SelectedItem text foreground -->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}"
Color="Black" />
</Style.Resources>
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="120" Margin="0 10" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Stretch="UniformToFill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
<StackPanel Grid.Row="0" Grid.Column="1" Margin="12 0 0 0">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Title:" FontFamily="Arial" Foreground="White"/>
<TextBlock Text="{Binding Title}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Release Date:" FontFamily="Arial" Foreground="White" />
<TextBlock Text="{Binding ReleaseDate}" FontFamily="Arial" Foreground="White" />
</StackPanel>
<TextBlock Text="Synopsis" FontFamily="Arial" Foreground="White" />
<TextBox Background="#454545" Foreground="White" TextWrapping="Wrap" Text="{Binding Synopsis}" MaxHeight="73" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Window>
I just want to games image to stretch to fill the canvas bounds, which is inside of the rounder border.
Why is it not doing this?
The problem is that you have the images within a canvas. Basically, any time you put an element in a Canvas panel, you are disregarding the entire layout system. Elements within a canvas do not participate in layout at all. What you want to do is replace the Canvas element with a plain Grid element (you don't need to define rows or columns, it will default to a single row/column.)
EDIT
And actually looking more closely at what you are trying to do, you'll need to make some slight tweaks. Try this.
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4">
<Grid>
<Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/>
<Image Source="Image/youtube.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="20" Width="20" />
</Grid>
</Border>
your problem is here
<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
you have a BorderThickness Attribute which puts the black border around the image, just remove it or set it to 0 and this will solve the problem.
so your code will be
<Border BorderBrush="#202020" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
or
<Border BorderBrush="#202020" BorderThickness="0" CornerRadius="4" Panel.ZIndex="0">
<Canvas Grid.Row="0" Grid.Column="0" >
<Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/>
<Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" />
</Canvas>
</Border>
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" >