I'm puzzled.
I have created a PNG image that to be a divider in my application display and the image is 3 pixels high like this:
However when I display it on my C# WPF window and run it, the divider is shown to be about 4 pixels instead, with the colours being off.
Code:
<StackPanel Height="3">
<StackPanel.Background>
<ImageBrush ImageSource="Assets/divider.png" Stretch="None"
AlignmentX="Left" AlignmentY="Top" Viewport="0,0,20,3"
ViewportUnits="Absolute" TileMode="FlipX" />
</StackPanel.Background>
</StackPanel>
Output and Zoom:
What I've thought would be that the image is "stretched" (despite Stretch="None") or there is some mechanism to optimize the image, so I did away with the image and wrote it with 3 rectangles with the same color and 1 pixel height each like this:
<StackPanel Height="3" Orientation="Vertical">
<Rectangle Fill="#484848" Height="1" />
<Rectangle Fill="#222" Height="1" />
<Rectangle Fill="#484848" Height="1" />
</StackPanel>
However the results were similar: 4 pixels and colours run off (not exact colours as specified):
Other than pixels being off, the colours are off too. My colours are supposed to be #484848, #222222, #484848. When displayed on the WPF window, the shades goes off a little (too many shades of grey!)
I need the separator to fill the window with too as the window gets resized. I'm a perfectionist and I want that 3 pixel height separator to be pixel perfect. Any solution to solve that problem?
With thanks to #Brian and #Sisyphe, I am able to display the lines properly. However this is still a solution done through Rectangle displays and I reckon there's a better solution.
Here's my current solution:
<StackPanel HorizontalAlignment="Stretch" Height="3">
<Rectangle Fill="#484848" Height="1" RenderOptions.EdgeMode="Aliased" />
<Rectangle Fill="#222222" Height="1" RenderOptions.EdgeMode="Aliased" />
<Rectangle Fill="#484848" Height="1" RenderOptions.EdgeMode="Aliased" />
</StackPanel>
Related
I have created a stack panel with 3 rectangles. I am trying to make a horizontal stack bar graph in UWP. so that the width of the rectangle is set through c program depending on the percentage.
<StackPanel Name="Graph" Orientation="Horizontal">
<Rectangle Name="PosBlock" Fill="#9EE000" Height="20" RadiusX="10" RadiusY="20" />
<Rectangle Name="NeuBlock" Fill="#FFBA00" Height="20" RadiusX="10" RadiusY="20"/>
<Rectangle Name="NegBlock" Fill="#D61602" Height="20" RadiusX="10" RadiusY="20"/>
</StackPanel>
Using this code I can get 3 rectangles with individually round corners like this image. See Image, 3rd rectangle width set to 0 . I dont want a gap between these rectangles. But i want rounded corners at the 2 ends. so i did this
<StackPanel Name="Graph" Orientation="Horizontal" CornerRadius="12,12,12,12">
<Rectangle Name="PosBlock" Fill="#9EE000" Height="20"/>
<Rectangle Name="NeuBlock" Fill="#FFBA00" Height="20"/>
<Rectangle Name="NegBlock" Fill="#D61602" Height="20"/>
</StackPanel>
But the rectangle corners are not cropped even if the stack panel corners are rounded. it looks like this
.
what should i do now?
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>
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 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>
Ok,
So I've tried to make an application which relies on images being scaled by an individual factor. These images are then able to be turned over, but the use of an animation working on the ProjectionPlane rotation.
The problem comes around when an image is both scaled and rotated. For some reason it starts bluring, where a non scaled image doesn't blur.
Also, if you look at the example image below (top is scaled and rotated, bottom is rotated) the projection of the top one doesn't even seem right. Its too horizontal.
http://img43.imageshack.us/img43/5923/testimages.png http://img43.imageshack.us/img43/5923/testimages.png
This this the code for the test app:
<UserControl x:Class="SilverlightApplication1.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas x:Name="LayoutRoot" Background="White">
<Border Canvas.Top="25" Canvas.Left="50">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="3" ScaleY="3" />
</TransformGroup>
</Border.RenderTransform>
<Border.Projection>
<PlaneProjection RotationY="45"/>
</Border.Projection>
<Image Source="bw-test-pattern.jpg" Width="50" Height="40"/>
</Border>
<Border Canvas.Top="150" Canvas.Left="50">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup>
</Border.RenderTransform>
<Border.Projection>
<PlaneProjection RotationY="45"/>
</Border.Projection>
<Image Source="bw-test-pattern.jpg" Width="150" Height="120"/>
</Border>
</Canvas>
</UserControl>
So if anyone could possible shed any light on why this may be happening, I'd very much appreciate it. Suggestions also welcome! :)
** Update **
Just to clarify, if the projection plane rotation is 0, the image becomes un-blurred, so its only during the rotation that the image is blurred.
The top image's width is set to 50 and the height to 40. So it is downscaled. Afterwards you scale it up to the right size 150, 120. I guess Silverlight scales the image down and doesn't store the original size due to performance optmization. Leave the Scale out and set the right width and height for the first image.
It looks like the top image is being filtered as it is being drawn. From your code you have:
<Image Source="bw-test-pattern.jpg" Width="50" Height="40"/>
for the top image and
<Image Source="bw-test-pattern.jpg" Width="150" Height="120"/>
for the bottom one. You have different image sizes so the top one might be being upscaled and therefore blurred as it interpolates the missing pixels.
I'm not familiar with silverlight so I don't know how you'd control the filtering options, but setting the top line above to the same as the bottom one might fix it.