I'm new to WPF, and trying to add a 1 pixel border or space between elements in a UniformGrid. How can I do this? I tried adding a Margin to each child element, but that creates a two pixel border between cells in the middle. I could add a margin to top and left, but that would make the bottom and right cells have no outside margin.
I tried googling, probably not using the right terms.
You said you tried setting Margin to 1, which gives you a total of 2 pixels around each element.
So cut it in half; set your items' margins to 0.5 instead. You'll also want to add a Margin of 0.5 to the UniformGrid itself, so everything ends up lining up on pixel boundaries.
(The leftmost column of items will have the UniformGrid's 0.5-pixel left margin, plus the item's 0.5-pixel margin, for a total of 1 pixel. Then between that first column and the next column, you'll have the first column's 0.5-pixel right margin, plus the next column's 0.5-pixel left margin, so once again you've got 1 pixel total between columns. It works out nicely.)
Option 1: Grid panel with ShowGridLines property, but there're just dashed lines.
Option 2: DataGrid with GridLinesVisibility=DataGridGridLinesVisibility.All. Here you could specify different line brushes with VerticalGridLinesBrush and HorizontalGridLinesBrush
Option 3: Own panel
I believe that there're more options, but I know just those I listed.
Here's the markup only solution, you can create a DP - Border width and bind to it, just give us a shout if you a need help on:
<Window x:Class="Margins.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Border Background="Green" Padding="0,0,10,0" HorizontalAlignment="Center" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Rectangle Fill="White" Width="100" Height="100" Margin="10,10,0,10"/>
<Rectangle Fill="White" Width="100" Height="100" Margin="10,10,0,10" />
<Rectangle Fill="White" Width="100" Height="100" Margin="10,10,0,10" />
<Rectangle Fill="White" Width="100" Height="100" Margin="10,10,0,10" />
</StackPanel>
</Border>
</Grid>
</Window>
Related
I use a Path element(StrokeThickness="1" SnapsToDevicePixels="True")
in Grid. I want to resize the window, the Grid element is wrapped by a Viewbox element.
Problem
When I resize the window, the Path will disappear some time. If I turn SnapsToDevicePixels to false, the Path element may blur which is not what I want.
How to avoid a single pixel line dispear?
the XAML code:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="207" Width="475">
<Viewbox Stretch="Fill">
<Grid Height="320" Width="517">
<Path Data="M0,0 H1 z" StrokeThickness="1" Stroke="Black" Margin="72,73,79,218" Stretch="Fill" SnapsToDevicePixels="True" MinHeight="1"/>
</Grid>
</Viewbox>
Pity for I have no reputation to post the runtime effect.
I have experimented the same problem with separators put in a Viewbox. Some of these disappear for some resolutions. To fix it, I replace them with border with 1 pixel height :
< Border Background="DarkGray" Grid.Row="0" Grid.ColumnSpan="7" Height="1" />
This avoid single line of one pixel to disappear in viewBox.
Hope it could be useful for you too.
Can we fill the rectangle by the given value?
<Rectangle Width="250" Height="50" Fill="White" Stroke="Black" StrokeThickness="4" RadiusX="20" RadiusY="20" />
If i give 50 mean the rectangle should be fill 50% yellow.(remaining 50% should be white ).
If i give 20 mean the rectangle should be fill 20% yellow.(remaining 80% should be white ).
Is it possible in windows phone 7?
Please let me know any idea for this. Please.
I have try to give the values from ViewModel. But i don't know how to give 50%, 20%, 75% color for the rectangle.
You should use a Grid control with 2 rows (or cells, depending on what orientation you want). Grids allow you to work with proportional heights and widths.
The rows Height properties are bound to you ViewModel.
Then you place a rectangle in the first grid row with the desired color.
Sample code:
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding Height1}"/>
<RowDefinition Height="{Binding Height2}"/>
</Grid.RowDefinitions>
<Rectangle Fill="Yellow" />
</Grid>
With the following code I can demonstrate how a black panel with a opacity of 50% is on top of every rectangle:
<Grid>
<Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
<Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
<Grid>
<Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
<Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
</Grid>
</Grid>
It looks like this:
I would like to have the yellow rectangle above the black panel, but that seems to be impossible.
I can achieve something close by setting the ZIndex of the Grid containing both the Blue and Yellow rectangles to "1". But this would also raise the blue rectangle above the black, and this is a problem.
<Grid>
<Rectangle Fill="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.5" Canvas.ZIndex="1"/>
<Rectangle Fill="Red" Width="200" Height="200" Canvas.ZIndex="0"/>
<Grid Canvas.ZIndex="1">
<Rectangle Fill="Blue" Width="100" Height="100" Canvas.ZIndex="0"/>
<Rectangle Fill="Yellow" Width="50" Height="50" Canvas.ZIndex="1"/>
</Grid>
</Grid>
How do I get only the yellow rectangle above the black?
In my real application I have user controls instead of the rectangles. I like to make a particular control standing out by having everything else covered by the half-black shade.
Many Thanks,
I don't think you'll be able to achieve this with your current arrangement of controls.
There are two levels of controls here, the "Blue" and "Yellow" controls inside the inner grid and then the "Black" and "Red controls together with the inner grid.
The ZIndex works on controls at the same "level" - so you can ensure that the yellow control is on top of the blue, but then at the higher level these are grouped under the inner grid so are treated as a single unit.
The only way this would work is if all your controls were at the same level. If you included a second semi opaque rectangle in the inner grid you could get the yellow to be on top of that but that might end up making other controls too dark.
One approach might be to not use just a simple black rectangle.
Instead use a Path composed of two rectangles. The first rectangle will cover the whole area and the second would just cover the control to be available.
This creates a large rectangle with a hole in it where your target control can show through and accept input.
The down side is working out the rectangle geometry to add to create the hole but that's fairly straight forward.
I have a a TreeView that fills the top part of the application, but since the number of items in the TreeView changes, my Apply button changes its position vertically. Is there a way to anchor it to the bottom part of the window, so it's always on the right bottom part of the window, i.e. 10x10 distance from the right bottom edge.
You can either set the HorizontalAlignment and VerticalAlignment on the TreeView or Button (I cannot tell which control you are trying to anchor), or you could place the control inside a DockPanel.
To space the control away from others use the Margin.
Margin="0 0 10 10"
will give you the margin only on the right and bottom
I hope this makes it a bit clearer:
<Window>
<DockPanel VerticalAlignment="Stretch">
<TreeView DockPanel.Dock="Top" />
<Button DockPanel.Dock="Bottom" Margin="0 0 10 10" />
</DockPanel>
</Window>
To achieve anchoring, Set following properties:
Width="auto"
Height="auto"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Set margins as needed.
Example:
<TabControl
Name="tabControl1"
HorizontalAlignment="Stretch"
Margin="40,40,40,40"
Width="auto"
Height="auto"
VerticalAlignment="Stretch">
I think you need this in the XAML of your button:
HorizontalAlignment="Right" VerticalAlignment="Bottom"
Is there a way to zoom a viewbox content, excpet for one control?
I have a viewbox with a grid, and in this grid I have some controls and I'm trying to zoom all the controls in the viewbox except one, is it possible?
Many thanks,
Paulo
You can use a grid to add layers to your layout. That way, you can zoom one set of items, and leave another set un-zoomed.
<Grid>
<Viewbox>
<!-- Controls to zoom -->
</Viewbox>
<!-- Control to exclude from zoom -->
</Grid>
The order of the view box and the other controls in XAML will depend upon which layer appears on top.
If that doesn't quite do what you want, leave a comment and I'll revisit the answer.
EDIT You want the unzoomed control to be positioned relative to the (0,0) of the Viewbox. That will happen in this situation because both children of the grid are in cell (0,0) which means that their top-left corners are aligned. Can you give an example of what you have in XAML, and what's wrong with it (perhaps edit your original question)?
Here's some XAML to try:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Background="Green">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Viewbox>
<Rectangle Fill="Yellow" Width="10" Height="10" />
</Viewbox>
<TextBlock>I am positioned at (0,0)</TextBlock>
<TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
</Grid>
</Page>
That gives a layout like this:
http://img20.imageshack.us/img20/2045/layout1m.png
But note that when the height is reduced, the grid becomes wider than the view box, and so the content is layed out like this:
http://img20.imageshack.us/img20/9397/layout2i.png
I guess that's not what you want. In that case, you use a canvas and go for something like this:
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Background="Green">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Viewbox>
<Rectangle Fill="Yellow" Width="10" Height="10" />
</Viewbox>
<Canvas>
<TextBlock>I am positioned at (0,0)</TextBlock>
<TextBlock Margin="50,50">I am positioned at (50,50)</TextBlock>
</Canvas>
</Grid>
</Page>
Which looks like this:
http://img20.imageshack.us/img20/6743/layout3i.png