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?
Related
I have a chart with thin lines as markers which the user can hover over to get their values.
I would like to make the area in which the tooltip activates bigger but keep the actual line the same size as it is quite difficult for the use to actually hover over.
I also have one line that the user can drag around and it is very difficult to get the precise spot to click and drag.
This is my template for the marker but I am not sure how to accomplish this goal, can anyone point me in the right direction?
<Geometry x:Key="LineGeometry">M 0,0 L 5,0 L 5,15 L 0,15 Z</Geometry>
<DataTemplate>
<!-- Define the template for the actual markers -->
<Path Width="10"
Height="10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="{StaticResource LineGeometry}"
Stretch="Fill"
Stroke="{StaticResource BlackBrush}"
StrokeThickness="0.5">
<Path.ToolTip>
<!-- Lots of tooltip definition stuff -->
</Path.ToolTip>
</Path>
</DataTemplate>
Visual Studio 2015
WPF
C#
Infragistics XamDataChart
Your actual problem is you have not used the Fill property of Path,so while creating this shape there is literally nothing in between lines, that's why if you check IsMouseOver property when Mouse pointer is inside this shape, it will return false. however if you specify Fill property result will be as expected.
Use Fill property as below and your ToolTip will be visible if Mouse is over Path shape anywhere.:
Fill="Transparent"
So your output won't get impacted visually. below is a sample program.
XAML:
<Window.Resources>
<Geometry x:Key="LineGeometry">M 0,0 L 5,0 L 5,15 L 0,15 Z</Geometry>
</Window.Resources>
<StackPanel>
<Path Width="100"
Height="100"
Name="path"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="{StaticResource LineGeometry}"
Stretch="Fill"
Stroke="Red" Margin="50"
StrokeThickness="5"
Fill="Transparent"
MouseLeftButtonDown="Path_MouseLeftButtonDown">
<Path.ToolTip>
<TextBlock Text="This is My Tooltip of Path" />
</Path.ToolTip>
</Path>
<StackPanel Orientation="Horizontal">
<Label Content="Is Mouse Over Path : " />
<Label Content="{Binding ElementName=path,Path=IsMouseOver}" BorderThickness="0.5" BorderBrush="Black"/>
</StackPanel>
</StackPanel>
Output:
Sorry,don't know how to captureMousein screenshot, but mouse is in between the shape while image was captured. RemoveFill
propertyfromPathand then see the change in ouput.
If I understand you correctly, you just want to show tooltip inside your rectangle represented by Path. If so you can just wrap your path in transparent border and set tooltip on border:
<Border Background="Transparent">
<Path Width="10"
Height="10"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Data="{StaticResource LineGeometry}"
Stretch="Fill"
Stroke="Black"
StrokeThickness="0.5"></Path>
<Border.ToolTip>
<TextBlock Text="Tooltip" />
</Border.ToolTip>
</Border>
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 want to crop an image in wp7 such that only some part of it appears in an imagebox (or just the 'image' control). I used image.clip, but it actually retains the whole image, and just whitens the 'to-be-cropped' portion. How can i crop the image so that the cropped image is the resultant image?
Note: I am looking for a way in xaml
This is working for me just fine with Light and Dark themes. I'm showing a square image inside an ellipse clip and adding a border around it; it's not showing through.
<Grid>
<Ellipse
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="78"
Height="78"
StrokeThickness="5"
Stroke=""/>
<Image
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill"
Source="{Binding MediumPhotoUrl}"
Width="64"
Height="64" >
<Image.Clip>
<EllipseGeometry RadiusX="32" RadiusY="32" Center="32,32"/>
</Image.Clip>
</Image>
</Grid>
Are you sure you're doing clip correctly?
If you know the size of the initial image, you can calculate the required transforms, for example:
<Image Width="100" Height="100">
<Image.Clip>
<!-- Image after clipping takes only a small area in the center -->
<RectangleGeometry Rect="25,25,50,50"/>
</Image.Clip>
<Image.RenderTransform>
<!-- Transforms Rect(25,25,50,50) into Rect(0,0,100,100) -->
<TransformGroup>
<TranslateTransform X="-25" Y="-25"/>
<ScaleTransform ScaleX="2" ScaleY="2"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
I don't know a way of doing it automatically (without code behind).
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 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.