I have a borderless Window with a Border as root node and Canvas as child.
The canvas is used to draw Polyline by MouseMove.
The border have a DropShadowEffect and this cause a significant drop of performance to draw on Canvas.
I have already seen that some others post suggest to put the Border and Canvas in 2 separate Grid, but this will not work for my case since if I put the Border inside a Grid I lose the shadow effect around the Window.
There is another way to prevent the propagation of the Effect?
This is the xaml code:
<Window x:Class="Test.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"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
Title="Test"
Height="600" Width="1000"
Background="{x:Null}"
BorderThickness="0"
BorderBrush="Black"
AllowsTransparency="True"
WindowStyle="None">
<WindowChrome.WindowChrome>
<WindowChrome
CaptionHeight="0"
ResizeBorderThickness="5,5,20,20"/>
</WindowChrome.WindowChrome>
<Border x:Name="borderShadow" Margin="0,0,15,15" BorderThickness="2,1" BorderBrush="Black" Background="#FF355870">
<Border.Effect>
<DropShadowEffect Color="Black"
Direction="315"
BlurRadius="15"
ShadowDepth="10"/>
</Border.Effect>
<Grid Background="#FF355870">
<Canvas x:Name="canvasBoard" Background="#00000000" MouseMove="canvasBoard_MouseMove" MouseDown="canvasBoard_MouseDown" MouseUp="canvasBoard_MouseUp"/>
</Grid>
</Border>
</Window>
You can put the Border alone inside a Grid in this way:
<Grid>
<Border x:Name="borderShadow" Margin="0,0,15,15" BorderThickness="2,1" BorderBrush="Black" Background="#FF355870">
<Border.Effect>
<DropShadowEffect Color="Black"
Direction="315"
BlurRadius="15"
ShadowDepth="10"/>
</Border.Effect>
</Border>
<Grid Background="#FF355870">
<Canvas x:Name="canvasBoard" Background="#00000000" MouseMove="canvasBoard_MouseMove" MouseDown="canvasBoard_MouseDown" MouseUp="canvasBoard_MouseUp"/>
</Grid>
</Grid>
Related
I have a WPF borderless window with a shadow set to the grid shown below:
<Window x:Class="Wpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" WindowStyle="None"
AllowsTransparency="True" Background="Transparent" BorderThickness="0">
<Grid>
<Grid.Effect>
<DropShadowEffect BlurRadius="15" Direction="-90" RenderingBias="Quality" ShadowDepth="2"/>
</Grid.Effect>
</Grid>
</Window>
However, when the BorderThickness is set to 0, the shadow doesn't appear. When I increase this, the shadow will appear, but when the window is moved to the edge of the screen using DragMove(), a gap is left (presumably the width of BorderThickness).
How can I, therefore, add a shadow around the window with BorderThickness set to 0? Thanks in advance.
<Window x:Class="WpfApp7.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"
xmlns:local="clr-namespace:WpfApp7"
mc:Ignorable="d" WindowStyle="None"
AllowsTransparency="True" Background="Transparent" BorderThickness="0"
Title="MainWindow" Height="450" Width="800">
<Grid Margin="10">
<Grid.Background>
<SolidColorBrush Color="Green" Opacity="1"/>
</Grid.Background>
<Grid.Effect>
<DropShadowEffect Color="Black" BlurRadius="15" Direction="-90"
RenderingBias="Quality" ShadowDepth="2"/>
</Grid.Effect>
</Grid>
:) just add margin to the grid. It needs space to show the shadow.
I have a Window with a canvas that has a rectangle at the top of it. It will stretch to fill the width if the canvas. The Canvas is set to be maximized with no toolbar to fill the entire screen like so:
<Window x:Class="Ericsson.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"
xmlns:local="clr-namespace:Ericsson"
mc:Ignorable="d"
Title="MainWindow" WindowStyle="None"
WindowState="Maximized">
<Window.Resources>
<SolidColorBrush x:Key = "brushResource" Color = "Black" />
</Window.Resources>
<Canvas x:Name="MyCanvas" >
<Rectangle x:Name="TopRect" Fill="Black" Height="120" Canvas.Top="0" Canvas.Left="0" Width="{Binding ElementName=MyCanvas, Path=ActualWidth}"/>
<Label Content="Welcome to My World" Foreground="#FFFFFF" FontSize="24"
HorizontalAlignment="Center"
VerticalAlignment="Center"
/>
</Canvas>
</Window>
My problem is this, I have a label that needs to be centered inside of the dynamic rectangle. The XAML code above puts the label in the upper left hand corner. So "HorizontalAlignment" and "VerticalAlignment" didn't work.
How do I center the label both horizontally and vertically inside of my rectangle?
Thanks
you can introduce an additional container - Grid - which will align elements properly:
<Canvas x:Name="MyCanvas">
<Grid Width="{Binding ElementName=MyCanvas, Path=ActualWidth}">
<Rectangle x:Name="TopRect" Fill="Black" Height="120" />
<Label Content="Welcome to My World" Foreground="#FFFFFF" FontSize="24"
HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
</Canvas>
I have a transparent Window which works fine, but a TextBox ignores the ClearType.
The RenderOptions.ClearTypeHint="Enabled" is set but nothing happens. There is no other Effect, OpacityMask, VisualBrush, DrawingBrush, Clip, or Opacity only AllowsTransparency="True" and AllowsTransparency="True".
AllowsTransparency="True"
AllowsTransparency="False" on normal Window
Xaml sample
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="200"
Width="300"
Title="MainWindow"
AllowsTransparency="True"
WindowStyle="None">
<Window.Template>
<ControlTemplate>
<Grid Background="White"
Height="200"
Width="300"
RenderOptions.ClearTypeHint="Enabled"
TextOptions.TextRenderingMode="ClearType"
TextOptions.TextFormattingMode="Display">
<StackPanel VerticalAlignment="Center"
HorizontalAlignment="Center">
<Label>Lorem Ipsum Test</Label>
<TextBlock>Lorem Ipsum Test</TextBlock>
<TextBox Text="Lorem Ipsum"
Background="White" />
</StackPanel>
</Grid>
</ControlTemplate>
</Window.Template>
</Window>
Any suggestions? Is this a known issue that can not be solved?
UPDATE
With Snoop I see a TextBoxLineDrawingVisual, maybe this is causing the issue?
That's because grid's attached properties for text like "RenderingMode" internally implemented to apply on "textblock" not "textbox" child elements.
I am trying to make a transparent window and on this window I am trying to display small web browser controls that would be nontransparent. I can't get it to work, the web browser control is loading and you can even click the links in the control, but it is not visible... any help is appreciated
<Window ...
Title="HelpView" Height="300" Width="300" WindowStyle="None" AllowsTransparency="True" >
<Window.Background>
<SolidColorBrush Opacity="0.6" Color="Black"/>
</Window.Background>
<Canvas Name="HelpCanvas">
<StackPanel>
<WebBrowser Width="150" Height="150" Source="http://www.msn.com"></WebBrowser>
</StackPanel>
</Canvas>
</Window>
I have my application and now I want to add a close button. I created it in the designer with a Image (Maybe there is a better way! If so, please answer) and everything seems to work:
Then I run the application and it looks like this:
Why isn't there the button / Image anymore? I have no idea!
BTW, the picture is a .png and is saved in the resources!
my wpf code:
<Window x:Class="Chat_App.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="1000" WindowStyle="None" AllowsTransparency="True">
<Window.Background>
<RadialGradientBrush>
<GradientStop Color="#FF323A44" Offset="1"/>
<GradientStop Color="#FF384A5A"/>
</RadialGradientBrush>
</Window.Background>
<Grid>
<Border BorderThickness="1" Height="26" VerticalAlignment="Top" Background="#FF436B85" MouseLeftButtonDown="Border_MouseLeftButtonDown">
<Image HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="33" Source="pack://siteoforigin:,,,/Resources/simat_btn_chat.png" MouseLeftButtonDown="Image_MouseLeftButtonDown" Margin="963,2,0,0"/>
</Border>
</Grid>
</Window>
BTW, I tried it with a ico file too!
Thank you!
Remove the verticalAlighment and horizontalAlignment of image and wrap it inside a grid, It should be like this,
<Border BorderThickness="1" Height="26" VerticalAlignment="Top" Background="#FF436B85">
<Grid HorizontalAlignment="Right" Width="24">
<Image Source="Images/download.jpg" Margin="0,0,0,0" d:LayoutOverrides="Width"/>
</Grid>
</Border>
try adding it as a resource (enables reusability too!)
<Window.Resources>
<Image x:Key="MyImage" Source.../>
</Window.Resources>
Then use it in your Grid as:
<Button Content={StaticResource MyImage} />
Also, make sure your image is built as a Resource
EDIT: The button is showing up, but not your image. So it cannot find it properly. Try changing your pack url.
Either like,
Source="pack://application:,,,/Resources/simat_btn_chat.png"
or
Source="/Resources/simat_btn_chat.png"