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>
Related
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>
I have a project consisting of two pages. One page is having th XAML of a User control developed by me.
The another page has the logic of cropping the image that is present in the image box on that page. I want to use my control on that page and assign the border background of the user control to the image cropped .
The following code is of my UserControl XAML ! The cs file for this page has no code implementation
<UserControl
x:Class="controlMagnifier.MagnifierUsercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:controlMagnifier"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Canvas x:Name="controlCanvas" x:FieldModifier="public" Margin="112,0,108,0">
<Canvas.RenderTransform>
<RotateTransform>
</RotateTransform>
</Canvas.RenderTransform>
<Grid Height="250" Width="176" Canvas.Left="41" Canvas.Top="40" Margin="-40,0,0,0">
<Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,25,13,97">
<Border.Background>
<ImageBrush x:Name="image1" ImageSource="/Assets/images.jpg" />
</Border.Background>
</Border>
<TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red" FontSize="20" Text="ABC" TextAlignment="Center" />
<!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
<Path x:Name="MagnifyTip" Data="M25.533,0C15.457,0,7.262,8.199,7.262,18.271c0,9.461,13.676,19.698,17.63,32.338 c0.085,0.273,0.34,0.459,0.626,0.457c0.287-0.004,0.538-0.192,0.619-0.467c3.836-12.951,17.666-22.856,17.667-32.33 C43.803,8.199,35.607,0,25.533,0z M25.533,32.131c-7.9,0-14.328-6.429-14.328-14.328c0-7.9,6.428-14.328,14.328-14.328 c7.898,0,14.327,6.428,14.327,14.328C39.86,25.702,33.431,32.131,25.533,32.131z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
</Grid>
</Canvas>
</UserControl>
In the user control XAML , we can see that I have set the
to a static image. I want to access this user control to another page and want to assign the element to the cropped image output on the other page. The other page MainPage.Xaml has the code for image cropping.
Any help would be appreciated
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 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"
I want to view a fullscreen video and thought this works like this:
<Window x:Class="test.Overlay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Overlay" Height="300" Width="300" WindowState="Maximized">
<Grid>
<Canvas Name="lightCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<MediaElement Name="lightMovie" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Source="C:\knoblauch\lights\1.wmv" Stretch="Fill" />
</Canvas>
</Grid>
but for some reason the video, in this case 1.wmv, doesnt fill up the screen.
Why?
Elements added to a Canvas will not be sized relative to the Canvas. They will be their non stretched size or a size which has been explicitly set (through setting Width, Height, etc). To get items to stretch you need containers that support that functionality suach as a Grid.
For instance:
<Grid>
<MediaElement Name="lightMovie" Source="C:\knoblauch\lights\1.wmv" Stretch="Fill" />
</Grid>
works as you are expecting.