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?
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>
I have the following code using a WPF Path object. I got the geometry data from Syncfusion MetroStudio 2 which has lots of free icons. However, whenever I try to use them they are cut off. The icon below should show a house but is cut off within the border below. Is there something wrong with my Path?
<Grid>
<Grid.Resources>
<Geometry x:Key="HomeGeometry">M31.427,15.523L53.103,34.871 53.103,59.723C53.088,60.666 52.466,61.263 51.961,61.544 51.426,61.845 50.850,61.972 50.232,61.976L38.688,61.976C38.290,61.976 37.902,61.821 37.619,61.544 37.340,61.272 37.179,60.890 37.179,60.502L37.179,48.548 25.677,48.548 25.677,60.502C25.677,60.890 25.514,61.272 25.235,61.544 24.953,61.821 24.564,61.976 24.167,61.976L12.622,61.976C12.008,61.972 11.428,61.845 10.895,61.544 10.390,61.263 9.767,60.666 9.752,59.723L9.752,34.871z M31.430,0C32.412,0,33.395,0.347,34.172,1.042L61.536,25.469C63.191,26.947 63.306,29.454 61.791,31.072 60.273,32.685 57.703,32.796 56.048,31.319L31.427,9.342 6.806,31.319C6.024,32.015 5.043,32.358 4.067,32.358 2.964,32.358 1.868,31.925 1.065,31.072L1.062,31.066C-0.447,29.454,-0.335,26.945,1.319,25.469L28.686,1.042C29.464,0.347,30.447,0,31.430,0z
</Geometry>
</Grid.Resources>
<Border
Width="50" BorderBrush="LightBlue"
Height="50" BorderThickness="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Focusable="False">
<Path Data="{StaticResource HomeGeometry}" Fill="Red"/>
</Border>
I think what you want is
...
<Path Data="{StaticResource HomeGeometry}" Fill="Red" Stretch="Uniform"/>
...
As we can see, your border is set to Width=50 and Height=50, we clearly see that your icon is larger then that.
Your code should be:
<Border
Width="64" BorderBrush="LightBlue"
Height="64" BorderThickness="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Focusable="False">
<Path Data="{StaticResource HomeGeometry}" Fill="Red"/>
</Border>
EDIT:
Or if you want your icon to be 50x50, do what "500 - internal.." said, it will stretch your icon to 50x50 by adding Stretch="Uniform"
I am attempting to create a slider control which will determine the scaletransform of a videobrush in my MainPage, and was wondering if it was possible to somehow place this slider on top of the videobrush (which I would like to be full screen)? Currently I am using a grid for my layout where a videobrush takes up the whole screen except for two buttons on the bottom of the screen, but I would like to possibly use a canvas and place this slider in a way that would account for the current and future screen sizes of a Windows Phone device. I am unsure of how to exactly accomplish this without setting constant dimensions for the slider. For instance the slider may be placed horizontally near the bottom of the screen in Portrait mode and would have a 50 pixel space between the left and right sides. Could someone assist with how this could be done?
EDIT
Placing a single child element over the videobrush works, although I would like to place more than one slider which gives an error. I also wanted to add information above and below each slider so I chose a stackpanel to do this (yet only one stackpanel as a child element is allowed?).
<Border x:Name="videoRectangle" Grid.Row="0" Grid.ColumnSpan="2" >
<Border.Background>
<VideoBrush x:Name="viewfinderBrush">
<VideoBrush.RelativeTransform>
<CompositeTransform x:Name="viewfinderBrushTransform" CenterX=".5" CenterY=".5" Rotation="90" />
</VideoBrush.RelativeTransform>
</VideoBrush>
</Border.Background>
<!--<StackPanel VerticalAlignment="Top">
<TextBlock x:Name="resolutionValueTextBlock" HorizontalAlignment="Center" Text="{Binding Value, ElementName=resolutionSlider}"/>
<Slider x:Name="resolutionSlider" HorizontalAlignment="Stretch" Margin="50,5,50,5"/>
<TextBlock x:Name="resolutionTextBlock" HorizontalAlignment="Center" Text="resolution"/>
</StackPanel>-->
<StackPanel VerticalAlignment="Bottom">
<TextBlock x:Name="zoomNumberTextBlock" HorizontalAlignment="Center" Text="{Binding Value, ElementName=zoomSlider}"/>
<Slider x:Name="zoomSlider" HorizontalAlignment="Stretch" Margin="50,5,50,5"/>
<TextBlock x:Name="zoomTextBlock" HorizontalAlignment="Center" Text="zoom"/>
</StackPanel>
</Border>
If possible I would like both stackpanels to be available, but if not I guess I would have to use the bottom one only.
Stay with the Grid:
<Grid>
<Rectangle>
<Rectangle.Fill>
<VideoBrush ... />
</Rectangle.Fill>
</Rectangle>
<Slider HorizontalAlignment="Stretch"
VerticalAlignment="Bottom"
Margin="50,5,50,5"/>
</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.