working with fontstretch in wpf - wpf

I want to learn how to utilize fontstretch in my wpf applications.
I've created this simple usercontrol, a border with rounded corners which has a textblock. I want to stretch the text of the textblock to fill my border. I want to avoid the use of the viewbox control to do this.
this is my usercontrol xaml
<UserControl x:Class="DisplayObject"
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="300" d:DesignWidth="400" Background="Transparent">
<UserControl.Resources>
<LinearGradientBrush x:Key="BackGroundBrush" StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="AntiqueWhite" Offset="0"/>
<GradientStop Color="White" Offset="0.45" />
<GradientStop Color="Silver" Offset="1" />
</LinearGradientBrush>
</UserControl.Resources>
<Border x:Name="LayoutRoot" CornerRadius="12" Background="{StaticResource BackGroundBrush}" BorderBrush="Black" BorderThickness="2">
<TextBlock TextAlignment="Center" Text="{Binding Path=DisplayText}"
Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center"
TextWrapping="Wrap" FontSize="12" FontFamily="Arial" FontStretch="UltraExpanded"/>
</Border>
</UserControl>
From what I gather from reading online the Arial font is an opentype so it supports stretching. I tried using horizontal/vertical alignment values of "Stretch" but this did not help. Not sure what I have done wrong but I figured someone on this site may be able to explain why its not stretching for me, and how to fix it.
Thanks for reading my post.

The Arial font does not seem to support the FontStretch value of UltraExpanded. Try the value of UltraCondensed instead to see it work:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding DisplayText}" FontSize="30"
FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Center" />
<TextBlock Grid.Row="1" Text="{Binding DisplayText}" FontSize="30"
FontFamily="Arial" HorizontalAlignment="Center" VerticalAlignment="Center"
FontStretch="UltraCondensed" />
</Grid>
Look at the Why FontStretch does not work in WPF? post to find out an alternative to using this little used property.

Related

WPF: How to Style my form with Transperancy levels

I want to implement this kind of Window:
So currently i have this Style :
<Window x:Class="CGTransparent.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="AboutDlg"
Opacity="0.75"
ResizeMode="NoResize"
SizeToContent="WidthAndHeight"
WindowStartupLocation="CenterScreen"
WindowStyle="None"
AllowsTransparency="True" Height="300"
Width="500"
ShowInTaskbar="False"
Background="#00000000">
<Window.Resources>
<LinearGradientBrush x:Key="GradientBrush" StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="Black" Offset="0.1" />
<GradientStop Color="#202020" Offset="0.25" />
<GradientStop Color="#303030" Offset="0.50" />
<GradientStop Color="#404040" Offset="0.75" />
<GradientStop Color="#505050" Offset="1.0" />
</LinearGradientBrush>
</Window.Resources>
<Border CornerRadius="15" DockPanel.Dock="Top" Background="{DynamicResource GradientBrush}" Margin="0" Padding="0" BorderBrush="Black" BorderThickness="0">
<Grid Margin="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="500" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="300" />
</Grid.RowDefinitions>
</Grid>
</Border>
</Window>
Result (ignore the tiger...):
Any idea how to achieve this example Style ?
Update:
<Window x:Class="app.Forms.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:PacketPlayer.Forms"
mc:Ignorable="d"
WindowStartupLocation="CenterOwner"
AllowsTransparency="True" WindowStyle="None"
Title="Window1" Height="300" Width="300">
<Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="20">
<Grid>
<Image Source="C:\Users\racr\Desktop\download.jpg" Stretch="Fill" Margin="-60">
<Image.Effect>
<BlurEffect KernelType="Gaussian" Radius="60" />
</Image.Effect>
</Image>
<Border CornerRadius="60" Margin="30" Background="#7F000000">
<TextBlock Foreground="White"
FontSize="20" FontWeight="Light" TextAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Run Text="Hello World" FontSize="48"/>
<LineBreak/>
<Run Text="walterlv.github.io"/>
</TextBlock>
</Border>
</Grid>
</Border>
</Window>
Result:
enter image description here
You cannot simulate your original image with only GradientBrush, you should blur an image with a large amount of blur radius.
Options to simulate it
It's sad to tell you that you cannot implement the iOS blur style exactly as it shows for you.
But, we have three other methods to simulate this kind of style (on Windows 10) and each has its advantages and disadvantages.
Call the Windows internal API SetWindowCompositionAttribute. You can get a lightly blurred transparent Window but this transparency is much less than the iOS one.
Add a BlurEffect to the window background image. You can get a more similar visual effect like the iOS one with very poor performance. But in this way, the background image is fixed and cannot be updated when the window moves.
Use UWP instead of WPF and use the AcrylicBrush. You can get a high-performance blur transparent window. But you should try the UWP Application development.
How to implement them
SetWindowCompositionAttribute API
Calling SetWindowCompositionAttribute API is not very easy, so I've written a wrapper class for easier usage. You can use my class by writing only a simple line in the XAML file or in the cs file.
<Window x:Class="CGTransparent.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:interop="clr-namespace:Walterlv.Demo.Interop"
mc:Ignorable="d" Title="AboutDlg" Height="350" Width="525"
interop:WindowBlur.IsEnabled="True"
Background="Transparent">
</Window>
Or you can use it in the cs file like this:
public class Window1 : Window
{
public Window1()
{
InitializeComponent();
WindowBlur.SetIsEnabled(this, true);
}
}
Just add my wrapper class into your project. It's a very long class so I pasted into GitHub: https://gist.github.com/walterlv/752669f389978440d344941a5fcd5b00.
I also write a post for its usage, but it's not in English: https://walterlv.github.io/post/win10/2017/10/02/wpf-transparent-blur-in-windows-10.html
WPF BlurEffect
Just set the Effect property of a WPF UIElement.
<Window x:Class="MejirdrituTeWarqoudear.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
AllowsTransparency="True" WindowStyle="None"
Width="540" Height="360">
<Grid>
<Image Source="YourImageFile.jpg" Stretch="Fill" Margin="-60">
<Image.Effect>
<BlurEffect KernelType="Gaussian" Radius="60" />
</Image.Effect>
</Image>
<Border CornerRadius="60" Margin="30" Background="#7F000000">
<TextBlock Foreground="White"
FontSize="20" FontWeight="Light" TextAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Run Text="Hello World" FontSize="48"/>
<LineBreak/>
<Run Text="walterlv.github.io"/>
</TextBlock>
</Border>
</Grid>
</Window>
Notice that it has a very poor performance.
UWP AcyclicBrush
You can read Microsoft's documents Acrylic material - UWP app developer | Microsoft Docs for more details about how to write an AcylicBrush.
Update
You can add a RectangleGeometry to clip your UIElement into a rounded rectangle.
<Window x:Class="MejirdrituTeWarqoudear.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="540" Height="360">
<Grid>
<Grid.Clip>
<RectangleGeometry RadiusX="60" RadiusY="60" Rect="30 30 480 300" />
</Grid.Clip>
<Image Source="High+Sierra.jpg" Stretch="Fill" Margin="-60">
<Image.Effect>
<BlurEffect KernelType="Gaussian" Radius="60" />
</Image.Effect>
</Image>
<Border Background="#7F000000">
<TextBlock Foreground="White"
FontSize="20" FontWeight="Light" TextAlignment="Center"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Run Text="Hello World" FontSize="48"/>
<LineBreak/>
<Run Text="walterlv.github.io"/>
</TextBlock>
</Border>
</Grid>
</Window>

A shape in XAML - how to draw this:

I need to make this shape on a windows phone 8 using XAML:
It is easy to make a rectangle with rounded corners, and the gray background also. But to make the top of the rectangle to be as shown seems very hard. Can someone give me a hint? It's been 2 years since I used XAML, and I am removeing the rust.
nah not really, it's actually pretty simple and there's multiple ways to accomplish the same effect. Here's an example.
<Grid Width="150" Height="200">
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border CornerRadius="10,10,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.822,0.633" StartPoint="0.158,0.189">
<GradientStop Color="#FF09CCF4" Offset="0"/>
<GradientStop Color="#FF020CA7" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<TextBlock Text="Blah" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
</Border>
<Border Grid.Row="1" Background="White" CornerRadius="0,0,10,10"/>
<TextBlock Grid.Row="1" Text="Other Stuff" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
You can trade the Border 's that were used for Rectangle's if you like, hope this helps.

Silverlight Rounding Corners

I have a Grid with various child elements like Grid, Stackpanel, Image...Is it possible to round the corners of the grid in a way that crops ALL of the contents? Additionally, the root Grid can vary in size so that cannot be hard coded.
Edit: After a great deal of searching I found that the best solution for this problem is using ClippingBehavior as susggested by #wdavo, thanks! The real problem is not knowing the dimensions of the image. If you know the dimensions then there are many simple out of the box solutions out there.
You can use this clipping behavior
http://expressionblend.codeplex.com/SourceControl/changeset/view/61176#494852
You'll need the Expression Blend SDK installed
<UserControl
x:Class="RoundedCorners.MainPage"
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:behaviors="clr-namespace:Expression.Samples.Interactivity"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
mc:Ignorable="d"
d:DesignHeight="800"
d:DesignWidth="800">
<Grid
x:Name="LayoutRoot"
Background="White"
Margin="50">
<Grid
Background="LightGreen">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition
Height="Auto" />
</Grid.RowDefinitions>
<i:Interaction.Behaviors>
<behaviors:ClippingBehavior
CornerRadius="30" />
</i:Interaction.Behaviors>
<Image
Grid.Row="0"
Stretch="Fill"
Source="Image.JPG" />
<StackPanel
Grid.Row="1">
<TextBlock
Text="Hello" />
<TextBlock
Text="World" />
</StackPanel>
</Grid>
</Grid>
You can do that by inserting the grid or stack panel to a border control just like the code below:
<Border CornerRadius="5,5,0,5" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Center" Width="100" Height="100" VerticalAlignment="Center">
<StackPanel>
<StackPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF030FC6" Offset="0.2"/>
</LinearGradientBrush>
</StackPanel.Background>
</StackPanel>
</Border>
<Border CornerRadius="5,5,0,5" BorderThickness="2" BorderBrush="Black" HorizontalAlignment="Left" Width="100" Height="100" VerticalAlignment="Center" Margin="68.833,0,0,0">
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFE90D0D" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<Grid/>
</Border>

Popup orientation is not correct. Its 90 degrees rotated

Hi
I have created a popup using Popup class in silverlight. I wrote a class of type UserControl and I added this usercontrol to the popup by using Child method of Popup class.
Following is the XAML code of my UserControl class
<UserControl x:Class="MyProject.PopupWindowContent"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}" UseLayoutRounding="False" Cursor="Hand">
<Grid Height="355" Name="grid1" Width="527.5">
<Image Height="355" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="527" Source="/MyProject;component/dialog_bg.png" UseLayoutRounding="True" />
<Image Height="194" HorizontalAlignment="Left" Margin="13,87,0,0" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="502.5" Source="/MyProject;component/dialog_box_1.png" />
<Image Height="46" HorizontalAlignment="Left" Margin="25.25,35.25,0,0" Name="image3" Stretch="Fill" VerticalAlignment="Top" Width="49.75" Source="/MyProject;component/dialog_logo.png" />
<TextBlock Height="40" HorizontalAlignment="Left" Margin="153.25,38.75,0,0" Name="popupHeading" Text="TextBlock" VerticalAlignment="Top" Width="212" TextAlignment="Center" FontWeight="Bold" FontSize="26" />
<Button Content="Submit" Height="71" HorizontalAlignment="Left" Margin="130.75,265.75,0,0" Name="buttonOne" VerticalAlignment="Top" Width="132.25" BorderThickness="1" FontSize="18" Foreground="Black">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FF06EF06" Offset="1" />
</LinearGradientBrush>
</Button.Background>
</Button>
<Button BorderThickness="1" Content="Cancel" FontSize="18" Foreground="Black" Height="71" HorizontalAlignment="Right" Margin="0,265.75,142,0" Name="buttonTwo" VerticalAlignment="Top" Width="132.25">
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFEF0606" Offset="1" />
</LinearGradientBrush>
</Button.Background>
</Button>
<TextBox Height="162.75" HorizontalAlignment="Left" Margin="18,108.25,0,0" Name="popupBody" Text="TextBox" VerticalAlignment="Top" Width="480.5" Background="{x:Null}" FontSize="20" Foreground="White" BorderThickness="0" />
</Grid>
I set this PopupWindowContent to my popup using following code in my xaml file
Popup popUnWin = new Popup();
popUnWin.Child = new PopupWindowContent();
popUnWin.IsOpen = true;
Problem is that when I execute this code, popup orientation is according to portrait but my app is landscape. So popup looks 90 degrees rotated.
Can anyone please tell me how can i fix it?
Best Regards
I found that if you put the popup into the xaml code of the page, then the orientation is done properly.
Are you setting SupportedOrientation on every page of your app or just the first? I think there's a wierd thing that if you set it on your first page, some things will respect it, but others (like the popup) look at the supported orientations of the active page?
I've seen some suggestions of adding the popup to the visual tree. I tried adding it to my xaml and it still didn't rotate, but you might want to give it a shot.
Do not rotate the popup but place a border inside the popup and load the content in the border.
I got it to work like this:
//In .xaml
<Popup x:Name="myPopup">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="480" />
</Grid.RowDefinitions>
<Border x:Name="popupBorder"/>
</Grid>
</Popup>
//In .xaml.cs
popupBorder.Child = new MyPopupPage(); //MyPopupPage is the "Windows Phone Landscape Page"
myPopup.IsOpen = true;

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