I have a grid it has a background color, I am then setting row colors, using Border. my grid looks like this:
<Grid Background="Red" >
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="60" />
<RowDefinition Height="300*" />
<RowDefinition Height="100*" />
</Grid.RowDefinitions>
<Border Grid.Row="0" Background="#4DC0E4" />
<Border Grid.Row="1" Background="Lime" />
<Border Grid.Row="2" Background="Lime" />
<Border Grid.Row="3" Background="Black" />
</Grid>
You can see a horizontal line:
between the 2nd and 3rd lime Border tag. I have tried using Rectangles instead of Border but it seems to be the same, also if I move the background on the grid itself to the Window it's the same. Is there anyway to get rid of this horizontal line, this line seems to appear if you have two of the same color Border tags next to each other (my page is more complex than this but this is a test representation of the issue).
Thanks for the SnapsToDevicePixels comment, I set that on the Window and it fixed it, many thanks, I have not heard of SnapsToDevicePixels before.
Related
In my application I need to have a listbox to display at the bottom of the screen. The listbox can be displayed of not (via a menu entry), and must be resizable in height. I placed it in a grid and used a gridsplitter to do the resize part, which works as intended.
My problem is, if no manual resize before, once log begins to appear in the listbox, this listbox does not show a scrollbar but instead in begins growing and takes more space. Once I trigger a resize using the gridsplitter, everything works as intended. What can I do to stop this ?
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ContentControl Grid.Row="0"
Grid.Column="1" />
<GridSplitter Grid.Row="1"
Height="5"
HorizontalAlignment="Stretch"
Visibility="{Binding ShowLogWindow,
Converter={StaticResource Bool2Vis}}" />
<ListBox Grid.Row="2"
VerticalAlignment="Stretch"
ItemsSource="{Binding Toolbox.LogEntries}"
MinHeight="50"
Visibility="{Binding ShowLogWindow,
Converter={StaticResource Bool2Vis}}" />
</Grid>
Set the Height of the third RowDefinition (or the ListBox itself) to 50 or whatever fixed height you want it to have.
Auto means size to content, which means that the height of the last row will grow as the ListBox grows. This is not what you want apparently.
i have a basic grid in my WPF application:
<Grid>
<Grid Height="260" HorizontalAlignment="Left" Margin="24,25,0,0" Name="grid1" VerticalAlignment="Top" Width="452">
<Border BorderBrush="Red" BorderThickness="6"></Border>
</Grid>
</Grid>
the grid is in the middle of the window.
When i maximize the window i want the grid to auto resize itself to the size of the window and stay with the same margin that i specified.
How do i do that ?
Do i have to calculate and resize the whole thing in the resize event?
i get from this:
to This (i dont want this):
i want the grid to resize to the same portions as it was , but for a full screen.
Remove Width and Height.
<Grid>
<Grid Margin="24,25">
<Border BorderBrush="Red" BorderThickness="6"></Border>
</Grid>
</Grid>
e: Added a second grid to make it identical to OP
You could host the Grid inside of another Grid with something like:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="25" />
<RowDefinition />
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition />
<ColumnDefinition Width="25" />
</Grid.ColumnDefinitions>
<!-- Main Grid -->
<Grid Grid.Row="1" Grid.Column="1">
<!-- Main Content -->
</Grid>
</Grid>
That would allow you to put all your content inside of the Main Grid, while maintaining a constant margin of 25 around all edges.
I have a Grid defined in my WPF application. I want to wrap a Border around the Grid itself. My problem is, the Border is filling the area available to the parent area. Because this, the Border is huge, but my content is small. My XAML is defined as follows:
<Grid>
<Border CornerRadius="0,0,2,2" BorderBrush="Black" BorderThickness="3" Margin="4">
<Grid HorizontalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="{Binding Path=Description}" />
<TextBlock Text="{Binding Path=Disclaimer}" />
</Grid>
</Border>
</Grid>
What am I doing wrong? How do I fix this?
Thanks!
you have the border inside your grid. do it like this <Border><Grid>...</Grid></Border>
I want to display text in a triangular area. But I cannot figure out how to change the shape of the TextBlock so that text is displayed in triangular region instead of the regular rectangular region.
Here is the simplified code of my UserControl:
<Grid >
<Image Height="100" Width="100" /> <!-- Some triangular image -->
<TextBlock Height="100" Width="100" Text="This text should fill up the triangualr image area"/>
</Grid>
Well kind of an overkill solution but the contents of the inner grid will be triangular in arrangement if something similar is followed:
<Grid>
<Image Height="200" Width="200" />
<Grid Width="200">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="2" Grid.ColumnSpan="1" Text="Line 1" HorizontalAlignment="Center"/>
<TextBlock Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="3" Text="This is Line 2." HorizontalAlignment="Center"/>
<TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="5" Text="This is Line 3. Wud be longest." HorizontalAlignment="Center"/>
</Grid>
</Grid>
For your reference, The grid is constructed as follows :
Set the background triangular image & I suppose that suffices.
You need to overwrite the TextBox's Template
I would recommend getting a copy of Blend, extracting the TextBox's Template from there, and modifying it to suit your needs.
If you are unable to get Blend, I'd recommend Show Me The Template, which is a WPF tool that shows the default template for most WPF controls
Just overwrite the template of the textbox, like this
<ControlTemplate TargetType="Textbox">
<Path ... define your triangle here>
</ControlTemplate>
and then set the enter property on the textbox to true. also align cont. hor. and vert. alg. that way it is centered in the middle of the triangle. make sure you make the textbox background transparent so it doesn't overwrite the triangle bounds.
also if you don't want to go outside the bounds, put the content presenter inside a viewbox.
you can also look into the clip property.
Lets take this code as basis:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button
x:Name="_buttonAdd"
Grid.Row="0"
Click="_buttonAdd_Click"
Content="Daten hinzufügen" />
<Button
x:Name="_buttonDel"
Grid.Row="1"
Click="_buttonDel_Click"
Content="Daten löschen" />
<DataGrid
x:Name="_dataGrid"
Grid.Row="2"
MinHeight="200"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
AutoGenerateColumns="True"
ItemsSource="{Binding Path=MitarbeiterList}"
VerticalScrollBarVisibility="Auto">
</DataGrid>
</Grid>
</ScrollViewer>
I want the ScrollViewer only to scroll, if the MinHeight of the DataGrid falls below 200.
On the other side I want the ScrollViewer not to scroll, if the MinHeight exceeds or in
other words: I want the DataGrid to stretch vertically to the visible area and shows its
own Scrollbar if necessary.
I hope you guys can solve my problem.
thanks in advance.
Thanks for your answer Wonko. Removing the scrollviewer isn't the key, but I can understand your thoughts. I finally did it my way, with a multibinding on MaxHeight:
<DataGrid
x:Name="_dataGrid"
Grid.Column="0"
Grid.Row="1"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
AutoGenerateColumns="True"
ItemsSource="{Binding Path=MitarbeiterList}"
VerticalScrollBarVisibility="Auto">
<DataGrid.MaxHeight>
<Multibinding Converter="{StaticResource MaxHeightConverter}">
<Binding Path="ActualHeight"
ElementName="_hostingWindow" />
<Binding Path="DataGridLocationPoint" />
</Multibinding>
</DataGrid.MaxHeight>
</DataGrid>
The MaxHeightConverter just subtract the ActualHeight of the window with the Y-Coordinate of the DataGrid-Location: So this sets the MaxHeight of the DataGrid always to the remaining available area of the window. The DataGridLocationPoint is set when the size of the window is changed. Like this:
public void dataGrid_SizeChanged(...)
{
GeneralTransform transform = dataGrid.TransformToAncestor(this);
Point DataGridLocationPoint = transform.Transform(new Point(0, 0));
}
(Sorry the code may not run, because I wrote it out of my Brain)
As you've written the code, the Grid will always have a minimum height of 300: 50 each for the first two rows, plus 200 for the DataGrid (as set by its MinHeight property). If the container of this Grid (or, actually, the ScrollViewer you've declared) becomes less than that, the ScrollViewer will show its vertical ScrollBar.
Personally, unless your container is going to be less than the size of the Buttons plus some of the DataGrid, I would simply remove the outer ScrollViewer. I can't tell for sure, but I believe that this will give you the functionality you desire.
The Buttons will always be visible, and the DataGrid will fill the remaining space. If the DataGrid needs more room than is visible, its ScrollBar will automatically show up.
One other thing I would probably do is to put the buttons next to each other horizontally - this will not only clean up the UI, but also save you some real estate. You could even make the row autosize, and size the buttons accordingly.
In summary, it might look something like this (I'd probably make a Style for the buttons as well, but you get the idea):
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
x:Name="_buttonAdd"
Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Left"
Margin="5"
Click="_buttonAdd_Click"
Content="Daten hinzufügen" />
<Button
x:Name="_buttonDel"
Grid.Column="1"
Grid.Row="0"
HorizontalAlignment="Right"
Margin="5"
Click="_buttonDel_Click"
Content="Daten löschen" />
<DataGrid
x:Name="_dataGrid"
Grid.Column="0"
Grid.Row="1"
Grid.ColumnSpan="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
AutoGenerateColumns="True"
ItemsSource="{Binding Path=MitarbeiterList}"
VerticalScrollBarVisibility="Auto">
</DataGrid>
</Grid>