How to autosize path to grid container in WPF - wpf

In WPF application, text is going out of its path as per screenshot.Please suggest how can we autosize it according to resolution/window size.i tried to set few property but did not help.
<Grid Grid.Row="0" >
<Popup x:Name="popLines"
PlacementTarget="{Binding ElementName=btn}"
Placement="Relative"
IsOpen="False"
Width="750"
ScrollViewer.CanContentScroll="True"
AllowsTransparency="True"
StaysOpen="False"
PopupAnimation="Scroll"
HorizontalAlignment="Left"
VerticalAlignment="Top"
HorizontalOffset="-190" VerticalOffset="0"
ToolTip="Approval Screen Help">
<Grid Margin="10">
<Path Fill="LightBlue" Stretch="Fill" Stroke="LightBlue"
StrokeThickness="3" StrokeLineJoin="Round"
Margin="0" Data="M130,154 L427.5,154 427.5,240.5 299.5,240.5 287.5,245.5 275.5,240.5 130,240.5 z">
<Path.Effect>
<DropShadowEffect BlurRadius="12" Color="Black" Direction="315" Opacity="0.8"/>
</Path.Effect>
</Path>
<Grid Margin="10,5,10,5" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="10"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Style="{StaticResource XBtn}" Click="btn1_Click" Grid.Row="0" HorizontalAlignment="Right" VerticalAlignment="Top"/>
<TextBlock Grid.Row="1" TextWrapping="Wrap" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
Text="{Binding ApprovalScreenHelp}">
</TextBlock>
</Grid>
</Grid>
</Popup>
</Grid>

Related

having a Grid control fill the parent container

I am trying to get this Grid control to fill to the width of the parent container. I saw several references the HorizontialAlignment set to Stretch should work but for me it does nothing. The Grid is sized only to the Width of my largest textblock. I have tried setting the Width to 'auto' and nothing there either.
<UniformGrid Rows="1" Columns="1" Height="75" Background="{StaticResource SteelBrush_Vert}" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Grid.Row="0">
<Viewbox Width="auto">
<Grid HorizontalAlignment="Stretch" Width="auto">
<Grid.RowDefinitions>
<RowDefinition Height="7*"/>
<RowDefinition Height="18*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="AppGreeting" Text="Good Morning, User" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,5,0,4.6" FontWeight="Bold" Grid.RowSpan="2"/>
<TextBlock x:Name="WindowName" Text="Home" HorizontalAlignment="Right" Margin="0,5,4.6,4.6" Grid.RowSpan="2"/>
</Grid>
</Viewbox>
</UniformGrid>
Use the Stretch="Fill" property in your Viewbox
<Viewbox Width="auto" Stretch="Fill">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="7*"/>
<RowDefinition Height="18*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="AppGreeting" Text="Good Morning, User" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,5,0,4.6" FontWeight="Bold" Grid.RowSpan="2"/>
<TextBlock x:Name="WindowName" Text="Home" HorizontalAlignment="Right" Margin="0,5,4.6,4.6" Grid.RowSpan="2"/>
</Grid>
</Viewbox>

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>

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.

Dropshadow appearing around textblock itself instead of the individual text characters

In my code, I made a DataTemplate in a SurfaceListBox. I added a drop shadow to the stack panel as well as to the textblock within the stack panel. When I run it, the drop shadow on the textblock appears on the textblock UI element itself instead of the individual characters of text. I am wondering why this is happening and if there is a way to fix it, so the drop shadow does appear on the text.
<DataTemplate>
<StackPanel Background="WhiteSmoke" Height="190" Width="190">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image VerticalAlignment="Top" HorizontalAlignment="Center" Height="140" Width="140" Stretch="Fill" Source="{Binding ImagePath}" />
<TextBlock Grid.Row="1" Text="{Binding Name}" Background="#9FCC19" Width="190" Height="50" TextAlignment="Center" VerticalAlignment="Center" Foreground="WhiteSmoke"
FontFamily="Segoe" FontSize="20" >
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" RenderingBias="Performance"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
<StackPanel.Effect>
<DropShadowEffect ShadowDepth="2"/>
</StackPanel.Effect>
</StackPanel>
</DataTemplate>
You need to get rid of the Background color of the TextBlock. You can put a Rectangle behind the TextBlock to achieve the same effect.
<DataTemplate>
<StackPanel Background="WhiteSmoke" Height="190" Width="190">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Image VerticalAlignment="Top" HorizontalAlignment="Center" Height="140" Width="140" Stretch="Fill" Source="{Binding ImagePath}" />
<Rectangle Fill="#9FCC19" Grid.Row="1" Width="190" Height="50"/>
<TextBlock Grid.Row="1" Text="{Binding Name}" Width="190" Height="50" TextAlignment="Center" VerticalAlignment="Center" Foreground="WhiteSmoke"
FontFamily="Segoe" FontSize="20" >
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="2" RenderingBias="Performance"/>
</TextBlock.Effect>
</TextBlock>
</Grid>
<StackPanel.Effect>
<DropShadowEffect ShadowDepth="2"/>
</StackPanel.Effect>
</StackPanel>
</DataTemplate>

Frame to Page Navigation

am trying to goto a page from main window by using I have put 4 rectangle around window for framing of main window .
But when I Navigate to page my bottom rectangle is getting shifted(as shown in picture. Its completely ok in main window.
my .xaml file for mainWindow is
<Window x:Class="Demo1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WPF Demo" Height="652" Width="924" WindowStyle="None" ShowInTaskbar="True" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded"
>
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="15">
<DockPanel Width="899">
<Frame x:Name="_mainFrame" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderBrush="Black" Background="LightBlue" CornerRadius="13" BorderThickness="1" Height="462" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Top" Width="732" Margin="90,80,15,15">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="10" Direction="330" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<DockPanel AllowDrop="True" HorizontalAlignment="Stretch" MinWidth="700" MinHeight="400" Background="LightBlue" Height="440" Width="700">
<!--change here-->
<Button Content="Button" Height="40" Name="button1" Width="89" Click="button1_Click" />
</DockPanel>
</Border>
<!--Bottom polygon-->
<DockPanel Height="74" Width="888" Margin="-846,520,10,-10">
<Polygon Name="polygon11" Points="0,60,80,0,810,0,875,60" Fill="LightCyan" Height="58" Width="890" Canvas.Left="-9" Canvas.Top="12" />
</DockPanel>
<!--left side polygon-->
<Canvas Height="557" Name="canvas5" Width="72" Margin="-1030,0,700,0" >
<Polygon Points="0,-10,60,45,60,500,0,545" Fill="LightCyan" Height="582" Width="67" Canvas.Top="1" Canvas.Left="18" />
</Canvas>
<!--Top polygon-->
<Canvas Height="55" Name="canvas7" Width="857" Margin="-890,-555,0,0" >
<Polygon Points="0,0,65,55,800,55,849,0" Fill="LightCyan" Height="59" Width="870" Canvas.Top="13" Canvas.Left="8" />
</Canvas>
<!--Right side polygon-->
<Canvas Height="545" Name="canvas6" Width="72" Margin="-80,40,0,80">
<Polygon Points="0,60,55,0,55,565,0,515" Fill="LightCyan" Height="583" Width="60" Canvas.Top="-14" Canvas.Left="12" />
</Canvas>
</DockPanel>
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="15" Direction="330" Opacity="0.5"></DropShadowEffect>
</Border.Effect>
</Border>
xaml.cs file is
private void button1_Click(object sender, RoutedEventArgs e)
{
_mainFrame.Navigate(new message_box.Page1());
}
Page1 has this code
<Page x:Class="message_box.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="652" d:DesignWidth="924"
Title="Page1">
<Border BorderBrush="Gray" BorderThickness="2" CornerRadius="15">
<DockPanel Width="899">
<Frame x:Name="_mainFrame" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Border BorderBrush="Black" Background="LightBlue" CornerRadius="13" BorderThickness="1" Height="462" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Top" Width="732" Margin="90,80,15,15">
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="10" Direction="330" Opacity="0.6"></DropShadowEffect>
</Border.Effect>
<DockPanel AllowDrop="True" HorizontalAlignment="Stretch" MinWidth="700" MinHeight="400" Background="LightBlue" Height="440" Width="700">
</DockPanel>
</Border>
</DockPanel>
<Border.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" ShadowDepth="15" Direction="330" Opacity="0.5"></DropShadowEffect>
</Border.Effect>
</Border>
</Page>
You should place your items in a Grid instead. I updated what you should try, but you will have to update your polygons
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Frame Grid.Column="1" Grid.Row="1"/>
<Grid Grid.ColumnSpan="3" Grid.Row="3">
<Polygon Points="0,60,80,0,810,0,875,60" Fill="LightCyan"/>
</Grid>
<Grid Grid.Column="0" Grid.RowSpan="3">
<Polygon Points="0,-10,60,45,60,500,0,545" Fill="LightCyan" />
</Grid>
<Canvas Grid.ColumnSpan="3" Grid.Row="0">
<Polygon Points="0,0,65,55,800,55,849,0" Fill="LightCyan" />
</Canvas>
<Canvas Grid.Column="2" Grid.RowSpan="3">
<Polygon Points="0,60,55,0,55,565,0,515" Fill="LightCyan"/>
</Canvas>
</Grid>

Resources