Assigning border to every Grid row - wpf

Currently I am setting the background on each Grid row individually:
<Grid>
<Grid.RowDefinitions><RowDefinition /><RowDefinition /></Grid.RowDefinitions>
<Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions>
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="6" Height="24" BorderBrush="#FF252A30" CornerRadius="10" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="1.036,0.367" StartPoint="-0.194,0.362">
<GradientStop Color="#AAE098" Offset="0.1"/>
<GradientStop Color="#D5E9D4" Offset="0.9"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="6" Height="24" BorderBrush="#FF252A30" CornerRadius="10" BorderThickness="1">
<Border.Background>
<LinearGradientBrush EndPoint="1.036,0.367" StartPoint="-0.194,0.362">
<GradientStop Color="#AAE098" Offset="0.1"/>
<GradientStop Color="#D5E9D4" Offset="0.9"/>
</LinearGradientBrush>
</Border.Background>
</Border>
</Grid>
Surely there must be some way to set this Border once for all rows. How is that done?
Thanks!

Or you could use this grid I just made. It will automatically add a border to every cell in the grid. This is the result:
C#:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
namespace GridWithBorder
{
public class BorderGrid : Grid
{
protected override void OnRender(DrawingContext dc)
{
double leftOffset = 0;
double topOffset = 0;
Pen pen = new Pen(Brushes.Black, 3);
pen.Freeze();
foreach (RowDefinition row in this.RowDefinitions)
{
dc.DrawLine(pen, new Point(0, topOffset), new Point(this.ActualWidth, topOffset));
topOffset += row.ActualHeight;
}
// draw last line at the bottom
dc.DrawLine(pen, new Point(0, topOffset), new Point(this.ActualWidth, topOffset));
//foreach (ColumnDefinition column in this.ColumnDefinitions)
//{
// dc.DrawLine(pen, new Point(leftOffset, 0), new Point(leftOffset, this.ActualHeight));
// leftOffset += column.ActualWidth;
//}
// draw last line on the right
//dc.DrawLine(pen, new Point(leftOffset, 0), new Point(leftOffset, this.ActualHeight));
base.OnRender(dc);
}
}
}
XAML:
<Window x:Class="GridWithBorder.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:GridWithBorder"
Title="MainWindow" Height="350" Width="525">
<local:BorderGrid>
<local:BorderGrid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</local:BorderGrid.RowDefinitions>
<local:BorderGrid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</local:BorderGrid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="Red" Margin="5" />
<Rectangle Grid.Row="0" Grid.Column="1" Fill="Blue" Margin="5" />
<Rectangle Grid.Row="0" Grid.Column="2" Fill="Orange" Margin="5" />
<Rectangle Grid.Row="0" Grid.Column="3" Fill="Red" Margin="5" />
<Rectangle Grid.Row="1" Grid.Column="0" Fill="Yellow" Margin="5" />
<Rectangle Grid.Row="1" Grid.Column="1" Fill="Green" Margin="5" />
<Rectangle Grid.Row="1" Grid.Column="2" Fill="Purple" Margin="5" />
<Rectangle Grid.Row="1" Grid.Column="3" Fill="Green" Margin="5" />
<Rectangle Grid.Row="2" Grid.Column="0" Fill="Orange" Margin="5" />
<Rectangle Grid.Row="2" Grid.Column="1" Fill="Red" Margin="5" />
<Rectangle Grid.Row="2" Grid.Column="2" Fill="Blue" Margin="5" />
<Rectangle Grid.Row="2" Grid.Column="3" Fill="Red" Margin="5" />
</local:BorderGrid>
</Window>

You could pull that border out into a reusable resource, but I suspect what you're really trying to do is create a GridView.

You can just set the Background property on your Grid. If there is commonality between the border which you are applying to the different rows, you can create a default style (and if desired, limit the scope of this style to the Grid itself):
XAML
<Grid>
<Grid.Resources>
<Style TargetType="{x:Type Border}">
<!-- All rows -->
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="CornerRadius" Value="5" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border Grid.Row="0">
<TextBlock Text="This row has a black border (default)." />
</Border>
<Border BorderBrush="Red" Grid.Row="1">
<TextBlock Text="This row has a red border." />
</Border>
<Border BorderBrush="Green" BorderThickness="4" Grid.Row="2">
<TextBlock Text="This has a thick green border." />
</Border>
</Grid>
With a default Style, no additional property needs to be set on your row's Border to achieve a default look (row one above). If a certain row needs to tweak the look and feel, then just provide additional properties on the Border to override the ones set in the default Style (rows two and three above). If this technique is something you are applying across multiple views in your application, then you can extract this style into a separate ResourceDictionary and simply merge it where appropriate.
Hope this helps!

Related

How to make two child occupy 100% and 20% of parent grid?

I have a grid with 2 rows. and I want to place a rectangle to take 100% of grid height and a text box to be placed outside the grid(overflow).
My XAML Code:
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Height="{Binding Height, ElementName=AppServer}">
<Rectangle.Fill>
<ImageBrush ImageSource="/Images/Server_Base.png"/>
</Rectangle.Fill>
</Rectangle>
<Label ClipToBounds="False" Grid.Row="1" Width="Auto" HorizontalContentAlignment="Right" VerticalContentAlignment="Bottom" Background="Transparent" >
<AccessText TextWrapping="Wrap">App</AccessText>
</Label>
</Grid>
as a simple workaround you may use below
<Grid>
<Rectangle>
<Rectangle.Fill>
<ImageBrush ImageSource="/Images/Server_Base.png" />
</Rectangle.Fill>
</Rectangle>
<Canvas VerticalAlignment="Bottom">
<Label ClipToBounds="False"
Canvas.Right="0"
Width="Auto"
Background="Transparent">
<AccessText TextWrapping="Wrap">App</AccessText>
</Label>
</Canvas>
</Grid>

MediaElement layout to occupy entire space

Below is my xaml code in which I have Mediaelement and 3 button hosted inside grid.
<Grid ShowGridLines="True">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="Black"
Offset="0" />
<GradientStop Color="#FF4F87F7"
Offset="1" />
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="7*" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Border Grid.ColumnSpan="4"
HorizontalAlignment="Stretch"
Grid.Row="1"
BorderThickness="2"
CornerRadius="5"
BorderBrush="Black">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Width="100"
Content="Previous"
Style="{DynamicResource buttonMargin}" />
<Button Width="100"
Content="Play"
Style="{DynamicResource buttonMargin}"
Click="Button_Click" />
<Button Width="100"
Content="Next"
Style="{DynamicResource buttonMargin}" />
<ToggleButton Style="{DynamicResource toggleButtonMargin}">Full Screen</ToggleButton>
</StackPanel>
</Border>
<MediaElement Name="me"
HorizontalAlignment="Stretch"
LoadedBehavior="Manual"
VerticalAlignment="Top"
Grid.IsSharedSizeScope="True" />
<GridSplitter Grid.Column="1"
Width="3"
HorizontalAlignment="Center" />
<WebBrowser Name="webBrowserScript"
Grid.Column="2" />
</Grid>
Problem: My aim is to render MediaElement in 0th row and 0th column and it should occupy entire space. However, MediaElement is not streaching entirely and not occupying entire space. I tried all possible combinations of HorizontalAlignment and VerticalAlignment. Can anyone help?
Regards,
Hemant
Got it..
Need to use Stretch property of media element.
<MediaElement Name="me" HorizontalAlignment="Stretch" LoadedBehavior="Manual"
VerticalAlignment="Stretch" Stretch="Fill"/>

How to full Screen popup in windows phone 8?

Hi;
i can not fit RadModalWindow on windows phone 8 application. How to fill all screen my popup?
<telerikPrimitives:RadModalWindow Name="cardselect" IsFullScreen="True"
HorizontalAlignment="Center" VerticalAlignment="Center"
PlacementTarget="{Binding ElementName=ContentPanel}"
IsClosedOnOutsideTap="True">
<Grid Name="ModalWindowGrid1"
Width="{Binding ProgramtDetailWidth, Mode=TwoWay}"
Height="{Binding ProgramtDetailHeight, Mode=TwoWay}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid.Background>
<ImageBrush ImageSource="Assets/Background.png"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Border BorderBrush="#FF0A0611" BorderThickness="0" Grid.Row="2">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF45374D"/>
<GradientStop Color="#FF1E092A" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Border BorderThickness="3" HorizontalAlignment="Left" Width="330" Height="392" VerticalAlignment="Top">
<Border.BorderBrush>
<SolidColorBrush Color="#FFF2F1F3"/>
</Border.BorderBrush>
<StackPanel HorizontalAlignment="Center" Width="330" Margin="-3,0" >
<StackPanel x:Name="MainPanel" Height="385">
<Border BorderThickness="0,0,0,3" Height="70" VerticalAlignment="Top" Margin="0,0,1,0">
<Border.BorderBrush>
<SolidColorBrush Color="#FFF2F1F3"/>
</Border.BorderBrush>
<TextBlock HorizontalAlignment="Center" Margin="0,22,0,15" TextWrapping="Wrap" VerticalAlignment="Center" FontSize="21.333" Height="32" Width="209" Grid.RowSpan="2" Text="Dijital Kart No Seçiniz"/>
</Border>
<StackPanel x:Name="WaitingPanel" Margin="0,60" HorizontalAlignment="Center" Visibility="Collapsed">
<TextBlock Text="Kayıt işlemi sürüyor." VerticalAlignment="Center" FontSize="21.333" HorizontalAlignment="Center"/>
<ProgressBar x:Name="pgb" Width="250" IsIndeterminate="True" Margin="0,10
,0,0" Value="0" />
</StackPanel>
<Grid x:Name="grdClient" HorizontalAlignment="Left" VerticalAlignment="Top" Height="313" Width="329">
<Grid.RowDefinitions>
<RowDefinition Height="255*"/>
<RowDefinition Height="58*"/>
</Grid.RowDefinitions>
<Button x:Name="btnOK" Content="OK" HorizontalAlignment="Right" Height="46" Margin="0,0,21,0" VerticalAlignment="Center" Width="119" Click="btnRecord_Click" Grid.Row="1"/>
<Button x:Name="btnCancel" Content="Vazgeç" HorizontalAlignment="Left" Height="46" Margin="21,0,0,0" VerticalAlignment="Center" Width="119" Click="btnCancel_Click_1" Grid.Row="1"/>
<ListBox Name="lstCards" SelectionMode="Single" HorizontalAlignment="Left" Height="210" Margin="21,21,0,0" VerticalAlignment="Top" Width="287" ItemsSource="{Binding}"></ListBox>
</Grid>
</StackPanel>
</StackPanel>
</Border>
</Border>
</Grid>
</telerikPrimitives:RadModalWindow>
It looks like your window's content is not big enough to fill the screen. The RadModalWindow does fill the whole screen, but any area not covered by your content will show what is behind it via transparency.
Make your main grid auto size to fill the screen. Alternately, setting a background colour or image on your window should ensure the transparency doesn't show the content behind the window.

Setting Z-Index in DataBound items on a Canvas

I am trying to bind a list of items to an ItemsControl, using a Canvas layout, where the item has multiple "levels". This is easiest to explain using an image:
My lower level is a drop-shadow in this case. Because I assumed the drop shadow would be attached to the main element (a Button), I created another visual element, a Border, which sits behind the Button and has the shadow attached. What I would like is for all of my shadow elements to be at the same overall ZIndex, and all of the Button elements to be above them.
In practice, it appears that WPF renders the contents of my template as a single UI element, essentially flattening the ZIndexes within it. Is there any way I can make it so that the ZIndex values are not flattened?
I have created a sample below which shows the problem:
<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="250" Width="600" Background="White">
<Window.Resources>
<DropShadowEffect Color="Blue" BlurRadius="75" x:Key="ActionDropShadow" />
<XmlDataProvider x:Key="myData" XPath="Data/Items">
<x:XData>
<Data xmlns="">
<Items>
<Item X="50" Title="AAA" />
<Item X="100" Title="BBB" />
<Item X="150" Title="CCC" />
</Items>
</Data>
</x:XData>
</XmlDataProvider>
<DataTemplate x:Key="BoxTemplate">
<Grid>
<Border Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" />
<Button Background="White" BorderThickness="1">
<TextBlock Text="{Binding XPath=#Title}" />
</Button>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ItemsControl Grid.Column="0" x:Name="list" ItemTemplate="{StaticResource BoxTemplate}" ItemsSource="{Binding Source={StaticResource myData},XPath=*}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding XPath=#X}" />
<Setter Property="Canvas.Top" Value="50" />
<Setter Property="Width" Value="50" />
<Setter Property="Height" Value="80" />
</Style>
</ItemsControl.ItemContainerStyle>
</ItemsControl>
<Canvas Grid.Column="1">
<Border Panel.ZIndex="5" Canvas.Top="50" Canvas.Left="50" Width="50" Height="80" Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" />
<Button Panel.ZIndex="10" Canvas.Top="50" Canvas.Left="50" Width="50" Height="80" Background="White" BorderThickness="1">
<TextBlock Text="AAA" />
</Button>
<Border Panel.ZIndex="5" Canvas.Top="50" Canvas.Left="100" Width="50" Height="80" Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" />
<Button Panel.ZIndex="10" Canvas.Top="50" Canvas.Left="100" Width="50" Height="80" Background="White" BorderThickness="1">
<TextBlock Text="BBB" />
</Button>
<Border Panel.ZIndex="5" Canvas.Top="50" Canvas.Left="150" Width="50" Height="80" Background="Black" BorderThickness="1" Effect="{StaticResource ActionDropShadow}" />
<Button Panel.ZIndex="10" Canvas.Top="50" Canvas.Left="150" Width="50" Height="80" Background="White" BorderThickness="1">
<TextBlock Text="CCC" />
</Button>
</Canvas>
<TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Center">Databinding Version</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center">What it should look like</TextBlock>
</Grid>
</Window>
Thanks in advance for any ideas you can offer!
Since the bound objects are wrapped in a ContentPresenter all internal ZIndex settings will be ignored, so you cannot do what you described. You might be better off creating an ItemsControl for each layer.
Get the parent ContentPresenter and set ZIndex on that.
E.g:
var parent = (UIElement) VisualTreeHelper.GetParent((UIElement) sender);
parent.SetZIndex(parent, z);

How to use left over space in wpf tab items row

Upper part of TabControl consists of TabItem controls. Is there a way to reuse remaining space there to put some WPF content?
I think I could use a "fake" TabItem with different styling and put my stuff in TabItem.Header but I was hoping there's a better way.
Solution
Based on the answer below, I got the desired behavior by wrapping TabPanel in the template below within e.g. StackPanel and adding my additional content after it.
<StackPanel Orientation="Horizontal">
<TabPanel
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
Background="Transparent" />
<TextBlock>Foo</TextBlock>
</StackPanel>
I tried a different way, which was to create another grid that occupies the same space as the TabControl, ie both are in Grid.Row=0. I have bound the grid height to the height of the first tab so if the tabs change height the other controls will remain centered. I set MinWidth on the window so the controls dont overlap the tabs.
Paste this code into a new WPF Window...
<Window x:Class="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"
mc:Ignorable="d"
Title="MainWindow" Height="306" Width="490" MinWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TabControl Grid.Row="0" x:Name="tabControl">
<TabItem x:Name="tabItem" Header="TabItem" Height="50">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
<Grid Grid.Row="0" Height="{Binding ActualHeight, ElementName=tabItem}"
VerticalAlignment="Top" Margin="0,2,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
VerticalAlignment="Center" Margin="20,0">
<TextBlock VerticalAlignment="Center" Margin="10,0" FontSize="16"
Foreground="Red" FontFamily="Calibri">My Text</TextBlock>
<Button Content="My Button" />
</StackPanel>
</Grid>
</Grid>
</Window>
...and you will get this:
You can use a template and make it do whatever you want, that is the power of WPF. Here is a nice article on customizing the TabControl and the TabItem controls.
< EDIT Adding code for TabControl template from Switch On The Code article>
<Style TargetType="{x:Type TabControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabPanel
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
Background="Transparent" />
<Border
Grid.Row="1"
BorderBrush="Black"
BorderThickness="1"
CornerRadius="0, 12, 12, 12" >
<Border.Background>
<LinearGradientBrush>
<GradientStop Color="LightBlue" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter ContentSource="SelectedContent" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
all you have to do is add your content to the Template, the part that holds the tab items is the <TabControl>

Resources