Why can't I add a border to the image I've added? What's wrong with this code?
<Border Name="imgBorder" BorderThickness="2">
<Image Height="150"
HorizontalAlignment="Left"
Margin="90,239,0,0" Name="image1"
Stretch="Fill" VerticalAlignment="Top"
Width="200"
Source="/ControlsBasics-WPF;component/GalleryImages/Lighthouse.jpg"
ImageFailed="image1_ImageFailed" />
</Border>
The default value for your Border's color, aka BorderBrush, is null, which means you won't see a border unless you specify its color.
Also, you specify a crazy high value for the Image's Margin, which will draw your Image 90 pixels right and 239 under the actual border!
Example for a black border
<Border Name="imgBorder" BorderThickness="2" BorderBrush="Black">
<Image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" Source="/ControlsBasics-WPF;component/GalleryImages/Lighthouse.jpg" ImageFailed="image1_ImageFailed" />
</Border>
Related
I have an image control in WPF and want to create highlighting over the image without fading the color of the rectangle when you change the opacity. This is what I want it to look like:
But I'm getting this:
Here is the code I have now.
<Grid>
<Image
x:Name="img"
Stretch="Uniform"
VerticalAlignment="Top"
HorizontalAlignment="Center"
RenderOptions.BitmapScalingMode="HighQuality"
UseLayoutRounding="True"
Source="Images/Doc.bmp" />
<Canvas>
<Rectangle
Width="300"
Fill="Yellow"
Opacity=".5"
Height="100"
Canvas.Top="200"
Canvas.Left="100" />
</Canvas>
</Grid>
What do I need to do to the rectangle to create the effect of the first image?
I'm having a weird issue that causes an Image to get distorted if I re-size the window to a particular size. I'm assuming the image is being positioned inside the scrollviewer to a sub pixel position , but I'm not really sure how to fix this.
I'm using a Scaletransform, but the current issue is happening if the scale is set to 1.
If you Look at the Text in the screenshot below you'll see the text is slightly distorted , If i re-size the window by a single pixel , the distortion goes away as seen in the alternate screenshot.
Pixel Distortion
No Distortion
XAML Code:
<ScrollViewer x:Name="scrollViewer"
Background="#282828"
Focusable="False"
Grid.Column="2"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible" SnapsToDevicePixels="True">
<Border BorderBrush="Red" BorderThickness="1">
<Grid Name="grid" RenderTransformOrigin="0.5,0.5" SnapsToDevicePixels="True">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform x:Name="scaleTransform" CenterX="0.5" CenterY="0.5" />
</TransformGroup>
</Grid.LayoutTransform>
<Image Name="img" HorizontalAlignment="Left" VerticalAlignment="Top"
IsHitTestVisible="False"
RenderOptions.BitmapScalingMode="NearestNeighbor"
SnapsToDevicePixels="True"
Stretch="Uniform" />
</Grid>
</Border>
</ScrollViewer>
Just a hunch: Have you tried to apply UseLayoutRounding?
I have a basic WPF windows with the markup as specific below:
<Window x:Class="Application.SomeWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="SomeWindow"
Topmost="True" WindowStyle="None" Height="39" Width="400"
ResizeMode="NoResize" ShowInTaskbar="False"
WindowStartupLocation="Manual" Background="Transparent"
Closing="Window_Closing" AllowsTransparency="True" Opacity="0">
<Border Background="CornflowerBlue" BorderBrush="Black" BorderThickness="0,0,0,0" CornerRadius="5,5,5,5" Opacity="0.75">
<Grid>
<!-- Display bar -->
<Image Grid.Row="1" Height="24" Margin="7,7,0,0" Name="img1" Stretch="Fill" VerticalAlignment="Top" Source="/Application;component/Images/dashboard/1.png" HorizontalAlignment="Left" Width="13" />
<Image Height="24" Margin="19,7,47,0" Name="image21" Source="/Application;component/Images/dashboard/2.png" Stretch="Fill" VerticalAlignment="Top" Grid.Row="1" Grid.ColumnSpan="2" />
<!-- Button 1 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,25,0" Name="btn1" Click="btn1_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="1">
<Image Height="26" HorizontalAlignment="Right" Name="img1" Source="/Application;component/Images/dashboard/3.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
<!-- Button 2 -->
<Button Style="{DynamicResource NoChromeButton}" Height="27" Margin="0,5,5,0" Name="btn2" Click="btn2_Click" VerticalAlignment="Top" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Width="23" ToolTip="2">
<Image Height="26" HorizontalAlignment="Right" Name="img2" Source="/Application;component/Images/dashboard/4.png" VerticalAlignment="Top" Width="22" Stretch="Fill" />
</Button>
</Grid>
</Border>
</Window>
Here is what it looks like now:
What I'd really like to do is make it so that initially looks like this:
Then, once mouseover happens, to fade background opacity in from 0 so it looks like the first image. The problem is that if I set the Border or Grid Background color to Transparent with the goal of fading in on mouseover, then everything inside the Border or Grid is affected as well.
Is there a way to manage the opacities of window and its UI elements seperately? Or perhaps there is a totally different route to take to get this background fade on mouseover? Thanks.
There are two options. Number one is to just move the outer border inside the grid, as the first child (and have the other controls alongside it, not in it). That way it will fade by itself, but still be behind the other controls. You will of course either have to set ColumnSpan/RowSpan, or wrap the entire thing in another Grid.
The second option is to just fade the background, not the entire border:
<Border ...>
<Border.Background>
<SolidColorBrush Color="CornflowerBlue" Opacity="0.5"/>
</Border.Background>
...
try this trick - draw a rectangle or border with dimensions bind to parent or ElementName.
It won't affect rest of elements of tree. Works for me.
<Grid x:Name="abc">
<Border
Width="{Binding ActualWidth, ElementName=abc}"
Height="{Binding ActualHeight, ElementName=abc}"
Background="Blue"
Opacity="0.5"/>
//buttons or inner grid
...
</Grid>
If you don'w want to use ElementName, simply replace Width and Height by
Width="{Binding ActualWidth, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
Height="{Binding ActualHeight, Source={RelativeSource Mode=FindAncestor, AncestorType=Grid}}"
I have a user control that is just a box with text like this:
<Border x:Name="box"
BorderThickness="0"
BorderBrush="Black"
Background="Black"
Width="200" Height="200">
<Label Content="Hello World"
Height="65" Width="400"
Foreground="White" FontSize="32"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" />
</Border>
When I create and instance of it in my MainWindow like this...
<local:MyBoxControl Width="1000" Height="1000"/>
the width and height is 200x200 as defined in the Border when I'd like it to be 1000x1000 as provided when I create it.
Just remove the Width and Height from the Border element.
Would it be acceptable for you to set the HorizontalAlignment and VerticalAlignment of the Border to Stretch?
Assuming you need the width/height of the border to remain at 200 (otherwise you just wouldn't specify it) you can make a grid the outermost element of the control and put the border inside it. Then if you don't define a width/height on that it will auto-adjust to the size of your control.
<Grid>
<Border x:Name="box"
BorderThickness="0"
BorderBrush="Black"
Background="Black"
Width="200" Height="200">
<Label Content="Hello World"
Height="65" Width="400"
Foreground="White" FontSize="32"
HorizontalAlignment="Center" VerticalAlignment="Center"
HorizontalContentAlignment="Center" />
</Border>
</Grid>
I have the following XAML code, which displays a picture (image inside borders) and a logo. Right now, the logo appears below the picture. This is expected, however my goal is to have the logo on top of the picture (precisely at the bottom-right corner). Does someone has an idea how to do that? Do we have layers in WPF?
Note: I absolutely need to keep the WrapPanel.
<WrapPanel>
<Border BorderBrush="Gray" BorderThickness="1" Margin="3">
<Border BorderBrush="White" BorderThickness="3">
<Border BorderBrush="LightGray" BorderThickness="0.5">
<Image Source="http://farm1.static.flickr.com/2/1703693_687c42c89f_s.jpg" Stretch="Uniform" />
</Border>
</Border>
</Border>
<Image Source="http://l.yimg.com/g/images/flickr_logo_gamma.gif.v59899.14" Height="10" />
</WrapPanel>
You should be able to do something along the lines of:
<WrapPanel>
<Grid>
<Border BorderBrush="Gray" BorderThickness="1" Margin="3">
<Border BorderBrush="White" BorderThickness="3">
<Border BorderBrush="LightGray" BorderThickness="0.5">
<Image Source="http://farm1.static.flickr.com/2/1703693_687c42c89f_s.jpg" Stretch="Uniform" />
</Border>
</Border>
</Border>
<Image Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="http://l.yimg.com/g/images/flickr_logo_gamma.gif.v59899.14" Height="10" />
</Grid>
</WrapPanel>
By not specifying any rows or columns our grid places the 2 items in row 0 column 0 and stacks them on top of each other. The second image has Horizontal and Vertical alignment set to make it appear in the bottom right, and I've added a margin to the 2nd image to bump it up a bit, otherwise it sits on the border which I assume is not what you wanted?
Put your picture and logo in a Canvas element and position them (Canvas.Top, Canvas.Left, etc) as needed.