I have a Grid layout. In one row, I have a Border and inside it a ToggleButton(with negative left margin so that it appears half outside the border). I've added DropShadowEffect to the border. Something seems to be clipping the shadow effect and the togglebutton outside the border. Please refer to the code and the image below.
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="140*" />
<RowDefinition Height="500"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="LightGray">
<Border Background="{StaticResource BorderFill}" Height="150" Width="400" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="20,0,20,10" BorderBrush="#FF999999" BorderThickness="1">
<Border.Effect>
<DropShadowEffect Color="Gray" BlurRadius="40" ShadowDepth="0.1"/>
</Border.Effect>
<ToggleButton Click="MenuToggleButtonClick" Margin="-6.5,0,0,5" Style="{StaticResource ExpandCollapseButtons}" Width="Auto" Height="Auto" x:Name="MenuToggleButton" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
</Border>
</Grid>
The left red arrow shows where the button is getting clipped and the right red arrow shows where the dropshadow is getting clipped. What is going on? How can I fix this?
It appears that this clipping only occurs when there isn't enough space for the inner Grid plus its margin. I was able to reproduce the behaviour in your screenshot if I resized the browser window small enough.
In your case, it appears there isn't enough height. A similar effect happens if there isn't enough width.
I'm not sure why this border clipping is happening. However, I found that if
I added the attributes MinWidth="440" and MinHeight="160" (the width and height of the inner grid plus its margin) to the outer Grid, I could no longer reproduce the clipping no matter how small I resized the browser window in any direction.
Related
I have a ScrollViewer which includes a lot of content (datagrids, stackpanels, textboxes, labels, etc...), and outside of it I want to add a button (PRINT), and it is important that the button is not part of the ScrollViewer. My goal is that the top 90% of my screen is the scrollviewer and the bottom 10% is a "frozen panel" that always shows the PRINT button, and this should remain true when maximized and minimized.
After having a lo of problems with 'the property content is set more then once' I realized I need to add both my ScrollViewer and the Button inside another container, so far the only one that seems to work is GRID - but honestly after you read this if you have anything else to recommend I am open to suggestions, I only used GRID because it seemed to almost give me what I wanted.
This is my code right now:
[Code]
<Window DataContext="{Binding PrintView, Source={StaticResource Locator}}" Width="900">
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer Name="PrintView" Grid.Row="0" Height="Auto">
<StackPanel>
... a LOT of stuff ...
</StackPanel>
</ScrollViewer>
<Button Content="Print"
Margin="0,20,0,20"
Height="50"
Width="150"
FontSize="24"
FontWeight="Bold"
Grid.Row="1"
/>
</Grid>
</Window>
[Code]
When done like this my ScrollViewer doesn't have a Scrollbar so I see the first page but I cannot scroll down, also there is no PRINT button seen
One interesting test was to change the following:
<ScrollViewer Name="Apercu" Grid.Row="0" Height="600">
Now I see my scrollbar again (and I can scroll) and my PRINT button is beneth it and always visible (this is almost perfect) but when I maximumize my window the ScrollViewer stays 600 of height and as such well it doesn't acctually maximize (everything below the PRINT button is just white).
Any ideas? Is there another way I could specify my HEIGHTS or is there a different control I should be using (not GRID)?
Thanks,
Found it ...
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
And remove height from ScollViewer
I've tried almost every combination of alignments and margins, to no success. The ListBox is on a WPF page, which is bound to a frame on the main window.
The ListBox itself is fine. It aligns just as I expect it would. My ListBoxItem contains an Image and a TextBlock. The TextBlock gets cut off.
As you can see from the following image, things are mostly good.
The ListBox is appropriately offset from the left edge and the top of that blue box. The content Image and TextBlock are fairly centered and so is the ListBoxItem outline. This is on my development machine.
I thought the whole reason for using grids, grid lines, and alignment properties, was so we didn't have to set a hard coded size. That our controls would resize themselves. Which does actually work just fine for everything else.
But when I place this on a small screen, I get this:
The ListBox itself is still aligned correctly. But now the ListBoxItem is forced down. It's top alignment is still good, but the bottom is pushed down so we can't see the TextBlock or the bottom of the ListBoxItem.
Here's my XAML:
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="1">
<Grid.RowDefinitions>
<RowDefinition Height="292*" />
<RowDefinition Height="30*"/>
</Grid.RowDefinitions>
<ListBox Grid.Row="1" Name="lbButtons" Margin="2,0,0,1.5" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Visibility="Visible" >
<StackPanel Name="spListBoxItems" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Horizontal">
<ListBoxItem Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >
<StackPanel Orientation="Vertical" HorizontalAlignment="Center" Margin="10,5,10,5">
<Image Source="/COBAN.CobanConsole.UI;component/Images/Buttons/Light/record48_light.png" />
<TextBlock Text="Record" Margin="5,5,0,0"></TextBlock>
</StackPanel>
</ListBoxItem>
</StackPanel>
</ListBox>
</Grid>
Not much to it. Any ideas on what's going on?
You're using * units on your grid row definitions. Those are relative measures: they just tell you what proportion of the space the rows can take up. If you need your listbox to have a specific height, you should change your second row to have an absolute size instead, like this:
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
I can never seem to wrap my head around the differences between the DockPanel, StackPanel and Grid in terms of restricting their children content. This XAML:
<DockPanel>
<Menu/>
<ToolBarTray/>
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TabControl>
<TabItem Header="Data" Name="tabData">
<DockPanel>
<Border Name="extraDataBorder" DockPanel.Dock="Top"
Style="{StaticResource ConsistentBorder}" Margin="10">
</Border>
<igDP:XamDataGrid Grid.Row="1"
Margin="10,10,10,0"
ScrollViewer.HorizontalScrollBarVisibility="Visible"
ScrollViewer.VerticalScrollBarVisibility="Visible" >
</igDP:XamDataGrid>
</DockPanel>
</TabItem>
</TabControl>
</Grid>
</ScrollViewer>
</DockPanel>
Produces a grid that is not constrained within the visible area of the screen as shown in the figure below:
I do not want the grid to extent beyond the visible area of the screen. Instead, I want it clipped so that users can see the horizontal scroll bar and not have to scroll down to see the horizontal scroll bar. I have tried using a Stack and DockPanel in place of the grid but get the exact same effect. How do I fix this?
TIA.
EDIT:
I am editing the original XAML to include the additional elements that caused this issue.
You can bind it to its parent's width and height as one of the many solutions.
If I add a DropShadowEffect to an parent element the text of the child elements are blurred. Why?
<Grid>
<Grid.Effect>
<DropShadowEffect />
</Grid.Effect>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock Background="White">Test</TextBlock>
</Grid>
Update:
with shadow
without shadow
The reason why the text is blurred is because Effects cause the elements and all sub-elements to be rendered into a Bitmap first. This means that sub-pixel rendering (ClearType) cannot take place and therefore the text appears lower-quality.
You can work around this by applying the effect to only parts of your visual tree. The parts that don't contain the text.
In your case you probably want something like this:
<Grid>
<Border>
<Border.Effect>
<DropShadowEffect />
</Border.Effect>
</Border>
<TextBlock Background="White">Test</TextBlock>
</Grid>
It may be a problem with subpixels.
Try to add UseLayoutRounding = "True" to the grid.
Try adding TextOptions.TextFormattingMode="Display" to the TextBlock as shown in WPF Blurry fonts problem - Solutions.
The effect might somehow increase the "bluriness" by e.g. moving the grid some fractions of a pixel or so.
edit: I'm rewriting almost the entire question because I realized the question was incorrect and confusing. I apologize for this, but the question had incorrect assumptions that made it impossible to answer. I originally tried to simplify it to make it easier to understand, but this made it impossible to replicate my problem.
If I have an DataGrid with a MinHeight in a ScrollViewer, I would expect that as my ViewPort shrinks, the ActualHeight of the element would be decreased until it hits MinHeight before the scrollbars show up.
Instead, it seems that when the datagrid's rows cumulative heights add up to more than the MinHeight, this value overrides MinHeight
Is there a way to do this without manually sizing everything and having a ton of code?
Example:
<ScrollViewer VerticalScrollBarVisibility="Auto" Background="Red">
<Grid x:Name="LayoutRoot" Background="Black" HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition MinHeight="20"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<sdk:DataGrid AutoGenerateColumns="True" Name="dataGrid1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinHeight="20" />
<Rectangle Fill="Blue" Width="100" Height="80" Grid.Row="1" />
</Grid>
</ScrollViewer>
If you were to populate this grid with some rows, if you maximize the window, the grid takes up most of the space and has white space after the rows. If you shrink it down, the layout takes away from the white space until that space runs out, then the root level ScrollViewer kicks in, even though MinHeight has not been reached.
If you replace the DataGrid with another rectangle, the behavior is different (obviously). The new rectangle would shrink down to height 20.
How do I achieve this with the grid? My requirements are to have nested scrollbars on my SL page (which I find distasteful, but it's not in my control). The idea is that the top level scrollbars are a "last resort" of sorts.
What about this:
<ScrollViewer>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="250" />
</Grid.RowDefinitions>
<Rectangle MinHeight="150" Background="Red" Grid.Row="0" />
<Rectangle Height="250" Background="Blue" Grid.Row="1" />
</Grid>
You did not have the Grid.Row values set on either of the rectangles.
You've not provided sufficient information to solve your specific problem. However, it is easy to demonstrate that the ScrollViewer does work in exactly the fashion you desire by distilling down to something as simple as:
<UserControl ...>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Border MinHeight="200" BorderBrush="Blue" BorderThickness="1" Background="Red"/>
</ScrollViewer>
</UserControl>
Put this in a standalone Silverlight application in the main page and you'll see that the ScrollViewer only displays the vertical scroll bar when the window is small enough. You can download the solution here.
This is because ScrollViewer itself has a border and padding that occupies little space of its own. Try considering little extra height that should match space of scrollbar border.
Another option will be to change the control template of scrollviewer and remove the border and extra space occupied around content presenter. And set horizontal scroll visibility to collapsed so it will not occupy space.