I've got a graph that looks like this:
And I want it to look like this:
I've been using Dynamic Data Display's Isoline library for this.
The issue is that in the upper-right corner, the area is colored, even though all values in that area are 0 (hence why the isolines stop).
Does anyone know if there is a way I can adapt my .xaml file so that area will just display a white background color?
Thank you in advance,
CX
My current .xaml file looks like this:
<Window x:Class="IntensityChart.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
Title="DynamicDataDisplay Sample - Intensity Chart" WindowState="Maximized"
Icon="{x:Static d3:D3IconHelper.DynamicDataDisplayWhiteIcon}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<d3:ChartPlotter Name="plotter" Grid.Row="0" Grid.Column="1">
<d3:ViewportHostPanel>
<Image Name="image" d3:ViewportPanel.ViewportBounds="0,0,2,1.5" Stretch="Fill"/>
</d3:ViewportHostPanel>
<d3:IsolineGraph Name="isolineGraph"/>
<d3:IsolineTrackingGraph Name="trackingGraph"/>
<d3:CursorCoordinateGraph/>
<d3:CursorCoordinateGraph/>
<d3:AxisCursorGraph/>
</d3:ChartPlotter>
</Grid>
I haven't worked much with Isolines, but based on the information I DO know about it, it looks like you'll have to change the palette class you use for your graph. There is a discussion that outlines a solution on the D3 discussion board.
Discussion
You could take the advice there and create a ratio based on your data, or you could just get to the source and in your palette class, tell all 0 values to be coloured with white.
Related
Using WPF, I have a Window, that is filled with one Grid. Currently this Grid has one Row and three Columns, each cell filled with the same UserControl.
Future versions might add more Rows to the Grid.
I want to make my window have the size of the Grid.
<Window
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns: ...
...
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="600"
Title="MainWindow" Height="600" Width="600">
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<View:ImageView Grid.Row="0" Grid.Column="0" DataContext="..."/>
<View:ImageView Grid.Row="0" Grid.Column="1" DataContext="..."/>
<View:ImageView Grid.Row="0" Grid.Column="2" DataContext="..."/>
</Grid>
The Window has a Width of 600. The Grid will stretch to this window. It will have a Width about 600. The Grid will have three columns with the same Width, something near 200. The ImageView in each cell will stretch to fill the Cell. Each Cell will have a Width about 200.
This determines the Height of the Cells, and thus the Height of the Grid.
Addition: after comments I don't want to resize the window. After it decided about what it should displays and what sizes the controls should have to display it nicely, there is no need to resize it.
For debugging, to see what happens, I resized the mainwindow, and recorded what happens to the various Height / Width / ActualHeight / ActualWidth values.
I noticed that the Grid is resized, such that its Width exactly fills the Width of the Window. Resizing will also Resize the cells and the ImageViews that are in the Cells.
This fitting is not the case with the Height. I can make the Height window Higher and Lower than the Height of the Grid.
I want to set the Height of the window such that it is exactly around the Grid.
I expected something like:
<Window ... Width = "600" Height = "auto" />
Nope, the height is way large than it should be, somewhere near 1000. The Grid is still about 300 x 600.
<Window ... Width = "600" Height = "*" />
This leads to an exception.
Maybe Binding? Something like this?
<Window ... Width = "600" Height = "{Binding Height, ElementName=MainGrid, Mode=OneWay}"/>
<Window ... Width = "600" Height = "{Binding ActualHeight, ElementName=MainGrid, Mode=OneWay}"/>
Nope, still way to large.
So, how to make sure that the window is exactly around the Grid?
Remove the Height from the window and set SizeToContent to Height. However, this will only set the width and height that you expect initially, not on resizing.
<Window
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns: ...
...
mc:Ignorable="d"
d:DesignHeight="600"
d:DesignWidth="600"
Title="MainWindow"
Width="600"
SizeToContent="Height">
If you want to resize the window like you describe, it would mean to keep the aspect ratio and this not easy to solve without unexpected effects or you would have to restrict resizing to the horizontal direction only, which is not trivial either. You can have a look at these related questions.
Resize a WPF window, but maintain proportions?
WPF Window - Only allow horizontal resize
Of course you could also listen for resize events of the window and do custom processing there, but this approach and also the ones above might harm your user experience and could introduce unwanted effects, so maybe it is more advisable to revisit the layout concept.
As #thatguy says, what you're asking for is difficult to do well. In general you don't want code that attempts to resize a window after a user resizes it because you'll get conflicts between what the user's trying to do and the code wants to do.
That still leaves you with a few options if you don't want your images clipped and want them to fill the window as much as possible, which I think is what you're asking for.
1/ You can maintain the aspect ratios of your images, resize them to fill the screen in one or the other direction, and accept you can get whitespace:
2/ You can stretch your images to fill the available space, and hence always fill the entire window as you resize, but losing the aspect ratio:
Code for these is below. Maintaining aspect ratios:
<Window x:Class="ImageResizeTest.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:ImageResizeTest"
mc:Ignorable="d"
Title="MainWindow" Width="600" Height="110">
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
<Image Grid.Row="0" Grid.Column="1" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
<Image Grid.Row="0" Grid.Column="2" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
</Grid>
</Window>
Stretching images to fill:
<Window x:Class="ImageResizeTest.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:ImageResizeTest"
mc:Ignorable="d"
Title="MainWindow" Width="600" Height="110">
<Grid Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Stretch="Fill" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
<Image Grid.Row="0" Grid.Column="1" Stretch="Fill" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
<Image Grid.Row="0" Grid.Column="2" Stretch="Fill" Source="https://upload.wikimedia.org/wikipedia/commons/3/30/Googlelogo.png" />
</Grid>
</Window>
I'm facing some elements' positioning problem in my wp 8.1 app (XAML/C#). I've read that to create a flexible layout, I should use the grid control.
Well, here is my XAML within the page element:
<Grid Style="{StaticResource LayoutGridCreateProfilStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Rectangle Grid.Row="0" Height="60" Fill="#F3A8E4F9" ></Rectangle>
<Rectangle Grid.Row="1" Height="40" Fill="Gray"></Rectangle>
<ListBox Grid.Row="2" Height="420" Background="Transparent"/>
<Canvas Grid.Row="3">
<Ellipse Height="100" Margin="0,0,0,0" Width="100" Fill="Black" Canvas.Left="152" Canvas.Top="10"></Ellipse>
</Canvas>
</Grid>
In the XAML designer, I'm actually seeing what I want and it looks like below:
And here is how it looks like on my Nokia Lumia 925:
As you can see, the ellipse is cut and I really cannot figure out how to place it as it should be and actually appears in the designer view.
Maybe somebody could help me with that ?
Thanks in advance !
The problem is that you are running out of height to show all the elements of your grid. The first three rows take up an accumulated height of 540 pixels. If the run time height available if 640 then you only have 100 left over for the last row of your grid.
But your Ellipse is offset 10 pixels from the top of the Canvas and so it needs a total of 110 (10 offset + 100 pixel ellipse height) in order to show fully. If your last row has less than 110 pixels of space then it will be truncated, as indeed it seems to be.
I'm trying to put a status bar on the bottom of my window that uses the same color scheme as the title bar. I know the piece I'm missing is style inheritance and/or template setting, but I've been reading for hours and I can't figure it out.
Here's how my window currently looks:
Here's how it looks in the designer:
What I want:
A status bar at the bottom of the window that mirrors the style of the titlebar. I recognize that my current implementation is probably less than great, so I'm also open to changing my statusbar defintiion as seen below. I tried to use an actual statusbar, but it wouldn't behave the way I wanted (the textboxes wouldn't fill the empty space, so the command line input textbox was very hard to click - maybe I was just doing something wrong). I'm assuming I can also apply the style to a rectangle just like anything else, right? I'm missing a critical component with the style property and probably the user of a template or a staticresource, but I'm totally lost.
Here's my current solution (a label and two textboxes for status updates and a cmdline):
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBox Grid.Row="0" Grid.Column="0"/>
<TextBox Grid.Row="0" Grid.Column="1"/>
</Grid>
</Grid>
I solved this by using the AccentColorBrush resource in my status bar grid.
<Grid Grid.Row="1" Background="{DynamicResource AccentColorBrush}">
I found it by inspecting many XAML files in MahApps.Metro on GitHub. This may seem obvious to some people, but for someone who is trying to learn XAML/WPF/MVVM, this wasn't straight forward. I hope this helps someone as I struggled with it for quite a while.
I'm developing an UserControl named Matrix2D to display 2 dimension matrix points in a x,y custom graphic.
Strange thing is, if I set Auto to Width/Height the columns/rows to the Grid that contains this Matrix2D control, like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<elem:Matrix2D x:Name="matrix2"
Grid.Row="0"
Grid.Column="0"
MaximumX="255"
MaximumY="127"
ZoomScale="1" />
</Grid>
I get the expected result (clean pixels):
I have also the expected result if I set HorizontalAlignment="Left" and VerticalAlignment="Top", like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<elem:Matrix2D x:Name="matrix2"
Grid.Row="0"
Grid.Column="0"
MaximumX="255"
MaximumY="127"
HorizontalAlignment="Left"
VerticalAlignment="Top"
ZoomScale="1" />
</Grid>
Although, If I don't set Auto to Grid neither set the Alignment, like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<elem:Matrix2D x:Name="matrix2"
Grid.Row="0"
Grid.Column="0"
MaximumX="255"
MaximumY="127"
ZoomScale="1" />
</Grid>
I get this blur result:
I already test several ways of developing this user control, with always the same result.
This is the current version:
<UserControl x:Class="Matrix2D"
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"
d:DesignHeight="300"
d:DesignWidth="300"
mc:Ignorable="d">
<Grid Background="White">
<Image x:Name="populationImg" Stretch="None" />
</Grid>
</UserControl>
In code behind:
I populate a WriteableBitmap and then I set populationImg.Source with it.
Already test the trick of setting RenderOptions.BitmapScalingMode="NearestNeighbor", but the result is approximate, and since this a Scientific Graphic I need that it be accurate. You can check in the corners of this result that is not accurate:
Even more visible in smaller graphic:
Setting RenderOptions.EdgeMode="Aliased" doesn't change anything.
Update
This explains why I have this blur effect:
To properly center an image, the container should have an even width,
height if the image's pixel width, height are even. If the image has
an odd pixel width, height, the containing element should also have an
odd width, height.
from Pixel Snapping in WPF Applications (In #Nicolas Repiquet answer)
Although, it didn't actually helped me to solve my problem. I would like that my user control be independent of its container. Any ideas how to do this?
My guess is that your control position within the parent container is not aligned to the pixel grid (ie, the x and y coordinates of your control on the screen is not a round number of pixels).
Try this :
<elem:Matrix2D SnapsToDevicePixels="true" ... />
UIElement.SnapsToDevicePixels Property
EDIT
"To properly center an image, the container should have an even width, height if the image's pixel width, height are even. If the image has an odd pixel width, height, the containing element should also have an odd width, height. " from Pixel Snapping in WPF Applications
My group is building an editor-type app in WPF. One thing we noticed is that on my WinXP machine, running with the "windows classic style" theme, the text on buttons is fits fine. However on my friend's machine, who's running with the "windows xp style" theme, the font size is bigger so text on buttons get clipped at the bottom.
Is there a way to handle this nicely, like automatically resizing controls to fit the text?
I hesitate to manually resize the button to fit his layout as anyone else can have totally different settings through the Display Properties and Accessibility Options.
Thanks!
A WPF button will automatically resize to fit the content that it has been given, however it will only do this when it is inside a container that does not enforce size and its size has not been set manually. To prove this mess around with the font size in the following code snippet:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button
Grid.Column="1"
Grid.Row="1"
FontSize="24"
Content="QWERTY"/>
</Grid>
I guess that your buttons haven't resized because you have constrained them. To fix this you need to decide how you want them to resize (which can be very complicated when elements would overlap if they just grew blindly) and if none of the supplied panel types perform the growth behaviour that you are looking for then you may need to write your own that does.
Have you hardcoded element sizes using Width and Height properties? In WPF the recommended way to do this is to use the several layout containers.
The following is an example of a grid which lays two buttons at the bottom and a textbox at the top.
<Grid>
<Grid.RowDefinitions>
<!-- TextBox row with unspecified height. -->
<RowDefinition Height="*"/>
<!-- Button row with automated height so it resizes to
fit the content -->
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Textbox on first row. -->
<TextBox Margin="3" Name="textBox1" Grid.Row="0" AcceptsReturn="True" />
<!-- StackPanel which lays the two buttons at the bottom horizontally.
RightToLeft is specified so that the first button appears on right.
-->
<StackPanel Grid.Row="1" HorizontalAlignment="Right"
Orientation="Horizontal" FlowDirection="RightToLeft">
<!-- The buttons. Only padding and margin are hardcoded so these
can resize to the contents -->
<Button Padding="3" Margin="3">OK</Button>
<Button Padding="3" Margin="3">Cancel</Button>
</StackPanel>
</Grid>