When the attached form is viewed in Blend 4, it appears as it should during both design and run time. When viewed in VS2010, it appears very different in the design window. However, it appears correct when running. Any clues?
This is the code:
<Window
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="LibraWPF.frmLoadTips"
x:Name="Window_MainLoadTips"
Title="Load Tips" WindowStartupLocation="CenterScreen" WindowStyle="None" ResizeMode="NoResize" Background="{x:Null}" Visibility="Visible" AllowsTransparency="True" Height="164" Width="305" IsEnabled="True" SizeToContent="Manual" MinWidth="305" MinHeight="164">
<Border Margin="0,0,8,8" d:LayoutOverrides="HorizontalAlignment" BorderThickness="1,0,1,1" >
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource HeaderBkgd}"/>
</Border.BorderBrush>
<Border.Effect>
<DropShadowEffect BlurRadius="8" ShadowDepth="2" Color="#FF707070" RenderingBias="Quality"/>
</Border.Effect>
<Grid x:Name="LayoutRoot" >
<Grid.Background>
<SolidColorBrush Color="{DynamicResource LibraContainerBkgd}"/>
</Grid.Background>
<Label Content="Load Tips" Height="27.333" VerticalAlignment="Top" FontFamily="Segoe UI Symbol" FontSize="14.667" >
<Label.Background>
<SolidColorBrush Color="{DynamicResource HeaderBkgd}"/>
</Label.Background>
</Label>
<Label Content="Select Tip Load Position:" HorizontalAlignment="Left" Height="27.491" Margin="37.684,41.427,0,0" VerticalAlignment="Top" Width="154.473" FontWeight="Bold"/>
<ComboBox Margin="220.002,41.427,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="36" IsEditable="True"/>
<Button Content="Go" Margin="37.684,91.173,0,0" x:Name="btnLoadTipsGo" Height="53.672" VerticalAlignment="Top" HorizontalAlignment="Left" Width="100.437" />
<Button Content="Cancel" Margin="160.739,91.173,0,0" IsCancel="True" IsDefault="True" Click="btnLoadTipsCancel_Click" x:Name="btnLoadTipsCancel" Height="53.672" VerticalAlignment="Top" HorizontalAlignment="Left" Width="100.437" />
</Grid>
</Border>
</Window>
The VS 2010 xaml editor does a poor job resolving design-time resources. I usually have both Studio an Blend open at the same time when working in SilverLight or WPF.
Related
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>
I hope someone can help me.
I have a WPF-Project (it´s working fine) and i want use it
in another one. But i got a System.Windows.Markup.XamlParseException.
at:
<Expander IsExpanded="True"
Header="Symbols"
Margin="0,1,0,0"
Content="{StaticResource SymbolStencils}" />
my SymbolStencils looks like:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:DiagramDesigner">
<s:Toolbox x:Key="SymbolStencils"
DefaultItemSize="55,55">
<ItemsControl.Items>
<Button IsHitTestVisible="False">Button</Button>
<ComboBox IsHitTestVisible="False" />
<Label IsHitTestVisible="False" >Label</Label>
<ListBox IsHitTestVisible="False" />
<Rectangle IsHitTestVisible="False" />
<TextBox IsHitTestVisible="False" >Text</TextBox>
<TextBlock IsHitTestVisible="False" >Text</TextBlock>
<RadioButton IsHitTestVisible="False" />
<CheckBox IsHitTestVisible="False" />
</ItemsControl.Items>
</s:Toolbox>
<Window x:Class="DiagramDesigner.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:DiagramDesigner"
WindowStartupLocation="CenterScreen"
Title="Diagram Designer Part 2"
FontFamily="SegoeUI"
Height="850"
Width="1100">
Thats my head in the XAML file
This is my UserControl file:
<UserControl x:Class="myProject.ButtonWithImage"
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"
xmlns:myProject="clr-namespace:myProject;assembly=myProject.BusinessLogic"
mc:Ignorable="d"
Name="ImagedControl"
d:DesignHeight="300" d:DesignWidth="300">
<Button Height="35" Width="90" FocusVisualStyle="{x:Null}" Foreground="White"
Click="OnClick" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0 0 1 1">
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding ElementName=ImagedButton, Path=ImageSource}" Stretch="None" Margin="0 0 5 0" />
<TextBlock Text="{Binding ElementName=ImagedButton, Path=Text}" FontSize="12" VerticalAlignment="Center" />
</StackPanel>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
And in a page I set up a button like this:
<myProject:ButtonWithImage ImageSource="/Resources/test.png" Text="Back" Name="btnBack1" Command="NavigationCommands.GoToPage" CommandParameter="ViewModel/Categories.xaml" />
However the text and the imagesource aren't on the button! They don't appear. What am I doing wrong?
Created Button Usercontrol
<Button x:Class="WpfApplication5.UserControl1"
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="300"
FocusVisualStyle="{x:Null}" Content="ok" Foreground="White" Height="30" Width="90" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0 0 1 1">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" Height="30" Width="30" Stretch="Fill" Margin="0 0 0 0" />
<TextBlock Text="{Binding Path=Content,RelativeSource={RelativeSource TemplatedParent}}" FontSize="12" VerticalAlignment="Center" />
</StackPanel>
</Border>
</ControlTemplate>
</Button.Template>
c# code
public partial class UserControl1 : Button
{
public UserControl1()
{
InitializeComponent();
}
}
xaml window
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:myProject="clr-namespace:WpfApplication5"
Title="MainWindow" Height="350" Width="525">
<myProject:UserControl1 Content="Button Text" Tag="btn2.png" />
You have named your UserControl ImageControl, but then you have tried to access it in your XAML using the name ImageButton. You'll have more luck if you stick with the one name. Try this instead:
<UserControl x:Class="myProject.ButtonWithImage"
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"
xmlns:myProject="clr-namespace:myProject;assembly=myProject.BusinessLogic"
mc:Ignorable="d"
Name="ImagedControl"
d:DesignHeight="300" d:DesignWidth="300">
<Button Height="35" Width="90" FocusVisualStyle="{x:Null}" Foreground="White"
Click="OnClick" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Padding="0 0 1 1">
<StackPanel Orientation="Horizontal" Margin="3">
<Image Source="{Binding ElementName=ImagedControl, Path=ImageSource}" Stretch="None" Margin="0 0 5 0" />
<TextBlock Text="{Binding ElementName=ImagedControl, Path=Text}" FontSize="12" VerticalAlignment="Center" />
</StackPanel>
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" CornerRadius="8">
<Border.Background>
SlateBlue
</Border.Background>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
This also assumes that you have correctly declared two DependencyPropertys of the correct type, named ImagesSource and Text in your UserControl and have set appropriate values for them.
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.
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;