wpf scrollviewer dialogbox - wpf

I have a question about WPF's ScrollViewer
This is the code I currently have:
<Window x:Class="BasketNovelEditor.Menu.AboutBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
WindowStartupLocation="CenterOwner"
Title="AboutBox" Height="Auto" Width="425" Focusable="True" SizeToContent="Height">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="200"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" MinHeight="50" VerticalContentAlignment="Center" HorizontalContentAlignment="Center">Thank you!</Label>
<Label Grid.Row="1" MinHeight="30" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">BasketNovel uses the following Libraries:</Label>
<Button Grid.Row="3" DockPanel.Dock="Bottom" IsDefault="True" IsCancel="True">Close Window</Button>
<ScrollViewer Grid.Row="2" Margin="5" Height="200">
<StackPanel>
</StackPanel>
</ScrollViewer>
</Grid>
And these are the results I'm getting:
http://i1280.photobucket.com/albums/a500/daegon123/ss.png
http://i1280.photobucket.com/albums/a500/daegon123/ss_zps3d6b8c90.png
I have absolutely no idea why my scrollbar is showing up like this.
I was at least expecting the up/down arrows to be placed at the start/end points
of the scrollbar.
Anyone have a clue as to why this is happening?
I'm not sure if this has anything to do with it, but the Window is
being used as a dialog box called as follows:
aboutbox.ShowDialog();
I'm currently using .NET 4.0
--EDIT2--
After a bit of testing, I realised that this would happen in all my modal windows
if I placed scrollviewers in them. The scrollviewer in my main window looks fine,
so I'm getting the feeling this is something modal window specific, or something
I may be doing to them without knowing. Anyone have any ideas?

Have you tried moving the Height="200" to the StackPanel instead?

This for some reason has been resolved after an update to Visual Studio 2012 update2.
I'm still using .NET 4.0

Encountered with the same problem in 2019, with VS2019 Community. ScrollViewer worked just fine in Main Window, but in Modal Window it doesn't scroll at all.
I set Height to the ScrollViewer and to the StackPanel, and it start worked fine.
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" PanningMode="Both" Height="340">
Also I played with different versions of .NET Framework

Related

WPF: Two borders with solid background have a ugly pixel row on top (merging color with parent panel's background)

Below there is shown a simple part of my wpf app where you can see two borders (1. and 2.).
At 3. you can see a lite red line (which is my problem). This line was never (explicitly) defined in xaml code. The red background was only defined in a parental grid and is gleam through at the top of the border element. Below Is my code:
<Window
x:Class="BgColorBug.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="200"
WindowStartupLocation="CenterScreen"
>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="1" Background="Red">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Border
Grid.Row="0"
Height="4" Background="#1F1F1F" />
<Border
Grid.Row="1"
Background="#777777"
>
<WrapPanel
Orientation="Horizontal"
HorizontalAlignment="Right"
>
<Button Padding="7" Margin="7">Hello</Button>
<Button Padding="7" Margin="7">World</Button>
</WrapPanel>
</Border>
</Grid>
</Grid>
When I define fix row heights (instead of the auto value) then the red line is not showing so I think it's a rendering problem (by the side the border from 1. has a red line too).
While I has written my question I found that article with the solution to my problem.
There must be declared UseLayoutRounding="True" on any grid above the last one (because that value is inherited down).
<Grid Grid.Row="1" Background="Red" UseLayoutRounding="True">
After known the keyword 'LayoutRounding' I found this Article on StackOverflow with a similar problem.
After knowing the issue with LayoutRounding=False I don't know what are the benefits from not using it? Maybee performance?
What is the best practise using that flag? In some Microsoft articles they say to set it true on the root element (which is the main window). But if so then I'm wondering why that flag is not true by default.

How to add a buttom that is always visible after a scrollviewer?

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

Hub Tiles animation "semi expanded" broken

I have an issue with the Windows Phone toolkit's hub tile.
All my hub tiles disappear when the animation state change to "semi expanded" (The one where half the icon + the text is visible). After a while the will change their animation state to different one and thetext or the right images show up as you expect them to.
It works in the emulator but not on my Lumia 800 and in the XAML preview of VS. Programming for WP 7.5 with VS 2010 on Win7 x64.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Grid HorizontalAlignment="Stretch" Margin="0,0,0,12">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<toolkit:HubTile
Grid.Row="1"
Grid.Column="0"
Margin="12,12,0,0"
Title="Brew 
House"
Source=""
Tap="HubTile_Tap"
Name="BrewHouseTile">
</toolkit:HubTile>
<toolkit:HubTile
Grid.Row="1"
Grid.Column="1"
Margin="12,12,0,0"
Title="Hops"
Source="/BrewingApp;component/Images/icon_hops_big.png"
Tap="HubTile_Tap"
Name="HopsTile" />
<toolkit:HubTile
Grid.Row="2"
Grid.Column="0"
Margin="12,12,0,0"
Title="Convert 
Units"
Tap="HubTile_Tap"
Source="/BrewingApp;component/Images/icon_scales_big.png"
Name="ConvertersTile" />
... more Hub Tiles
</Grid>
</Grid>
This actually a bug in the Windows Phone toolkit. Upon resizing of the Hub Tiles the width and height get calculated again. This calculation uses a Float.TryParse() method that relies on a CultureSetting. However, when not set to EN-US this break. There is an issue on Codeplex with a quickfix:
http://phone.codeplex.com/workitem/10602
This has exactly happened to me.
To resolve the bug:
You need to download the toolkit sources from here: http://phone.codeplex.com/SourceControl/changeset/view/80797#
Modify the HubTileConverters.cs as it´s said in http://phone.codeplex.com/workitem/10602
And then compile. The dll file will be in the Bin ->Debug or Bin->Release depending if you compiled in debug or device mode.
You use this new dll fixed and works perfectly.

Wpf Resize object with window

Looked around to find a way to resize bind with the windows resize without explicitly telling my object to grab the windows size.
Here is the code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<WindowsFormsHost Background="{x:Null}" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" Name="windowsFormsHost1" VerticalAlignment="Top" Margin="-1,0,0,0">
<wf:Panel x:Name="pnlLivePreview" />
</WindowsFormsHost>
</Grid>
This was followed by the example showed here
Edit: Question: Why doesn't panel resize with the window ?
Simply remove the explicit Width and Height settings, and the HorizontalAlignment and VerticalAlignment settings, thus:
<WindowsFormsHost Background="{x:Null}"
Name="windowsFormsHost1"
Margin="-1,0,0,0">
<wf:Panel x:Name="pnlLivePreview" />
</WindowsFormsHost>
I'm going to throw a wild guess here, but since this is a WinForms panel, try setting it's Dock property to Fill thus:
<wf:Panel x:Name="pnlLivePreview" Dock="Fill" />
Really not sure it would work, if it doesn't work in markup, try doing it in code.
Bind your Height/Width to your window's height/width
<Window x:Name="Root_Window">
<Grid Height="{Binding ElementName=RootWindow, Path=ActualHeight}"
Width="{Binding ElementName=RootWindow, Path=ActualWidth}">
<!-- Content Here -->
</Grid>
</Window>
The answer: Problem is not the panel but the api used to create the content of it.

WPF TabControl Children

This is my current Scenario: I have several UserControls inside different TabItems on a single TabControl in a WPF Window. Something Like:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="S.C.A.R" WindowState="Maximized">
<TabControl Name="MainTabControl">
<TabItem Name="TabOps">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="30"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Local:ServiceList Height="Auto" CanInsert="True" CanCollapse="True" Grid.ColumnSpan="3" x:Name="SL" RecordState="Edit"/>
<Local:ReservationList CanCollapse="True" Grid.Row="1" RecordState="Edit" x:Name="RL"/>
<Local:DriverList CanDelete="False" CanInsert="False" CanCollapse="True" Grid.Row="1" Grid.Column="2" RecordState="Edit" x:Name="DL"/>
<Local:CustomerForm CanDelete="False" CanInsert="False" Grid.Row="2" Grid.ColumnSpan="3" RecordState="View" x:Name="CL"/>
</Grid>
</TabItem>
<TabItemItem Name="TabCodes">
<Local:CustomerList x:Name="CustomerCRUD" RecordState="View"/>
</TabItem>
<Button Grid.Row="1" Content="TEST" Click="Button_Click"/>
</Grid>
</Border>
</Window>
Sorry for the indentation. For some reason I can't get the code properly indented here :(
What I need to do is to determine (preferably in the TabControl.Load Method, which of my different UserControls are currently visible. I need to do this in a dynamic way, I cannot hardcode the relationship between the TabItems and their children, something like:
if (TabControl.SelectedItem is XXXX)... is not possible here, because this is a Dynamic UI and I have no way to know which controls are there up front.
I've been digging a little bit and found out that the TabItem controls do not appear in the Visual tree of their "children". I only see a ContentPresenter, and then the TabControl itself. It looks like the tabItems do not "contain" their own content, so I could not, for example, do a FindAncestor to the Tab Items.
Another interesting fact is that the Loaded event of my usercontrols is being called on startup. Regardless of whether or not they're visible on screen.
An ideal scenario will be to find an event that is only fired on my Usercontrols when the TabItem they are under gets selected.
Appreciate any ideas. Thanks in advance
You should be able to leverage the VisualTreeHelper and consequentrly this answer on SO to provide the TabItem.Content returned object and look for the your specified type, UserControl in this instance.
NOTE:
For additional details please see the comments which transpired in the SO's question.

Resources