GridSplitter in a Frame; expand beyond border problems - xaml

I've got a generic view for displaying data in a Silverlight RIA application. Basically, the view takes in a parameter which is the query required by RIA to get the data, and the data is displayed using autogenerated fields.
Here's part of the XAML code for the view.
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition x:Name="DataGridRow"/>
<RowDefinition Height="Auto"/>
<RowDefinition x:Name="DataFormRow"/>
<RowDefinition Height="Auto" x:Name="EditRow"/>
</Grid.RowDefinitions>
<ria:DomainDataSource Name="SQLDomainDataContext" LoadingData="SQLDomainDataContext_LoadingData" LoadSize="45" SubmittedChanges="SQLDomainDataContext_SubmittedChanges" SubmittingChanges="SQLDomainDataContext_SubmittingChanges" LoadedData="SQLDomainDataContext_LoadedData">
<ria:DomainDataSource.SortDescriptors>
<ria:SortDescriptor Direction="Descending" PropertyPath="BaseProperties.CreatedOn" />
</ria:DomainDataSource.SortDescriptors>
</ria:DomainDataSource>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<sdk:DataGrid Grid.Row="0" AutoGenerateColumns="True" Name="dataGrid" ItemsSource="{Binding}" DataContext="{Binding Path=Data, Mode=TwoWay}" IsReadOnly="True" AutoGeneratingColumn="dataGrid_AutoGeneratingColumn" SelectionChanged="dataGrid_SelectionChanged" />
<custCont:LocalizedDataPager Grid.Row="1" x:Name="pager" Source="{Binding Path=Data}" PageSize="15" DisplayMode="FirstLastPreviousNext" />
</Grid>
<Border Grid.Row="1">
<Border.Background>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FF9D9D9D" Offset="0" />
<GradientStop Color="#FFDBDBDB" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Ellipse Fill="Black" HorizontalAlignment="Center" Width="4" Height="4" Margin="8,0"/>
<Ellipse Fill="Black" HorizontalAlignment="Center" Width="4" Height="4" Margin="8,0"/>
<Ellipse Fill="Black" HorizontalAlignment="Center" Width="4" Height="4" Margin="8,0"/>
</StackPanel>
</Border>
<sdk:GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" Background="Transparent" Opacity="0"/>
<data:DataForm Grid.Row="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="DF" AutoCommit="False"
DataContext="{Binding Path=Data, Mode=TwoWay}" ItemsSource="{Binding}"
AutoGeneratingField="DF_AutoGeneratingField" EditEnded="DF_EditEnded" DeletingItem="DF_DeletingItem" Style="{StaticResource DataFormStyle}"/>
<Grid Grid.Row="3">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="0" Name="btnHideDF" Content="{Binding Source={StaticResource ApplicationResources}, Path=ApplicationStrings.ShowEntities_HideDfBtn}" MinWidth="10" Margin="2" Click="btnHideDF_Click" />
<Button Grid.Column="2" Name="bRefresh" Content="{Binding Source={StaticResource ApplicationResources}, Path=ApplicationStrings.ShowEntities_RefreshBtn}" MinWidth="75" Margin="2" Click="bRefresh_Click" IsEnabled="{Binding Path=CanLoad}" />
<Button Grid.Column="3" Name="btnCacnelChanges" Content="{Binding Source={StaticResource ApplicationResources}, Path=ApplicationStrings.ShowEntities_CancelChangesBtn}" Margin="2" IsEnabled="{Binding Path=HasChanges}" Click="btnCacnelChanges_Click" Visibility="Collapsed" />
<Button Grid.Column="4" Name="bSubmit" Content="{Binding Source={StaticResource ApplicationResources}, Path=ApplicationStrings.ShowEntities_SubmitBtn}" MinWidth="75" Margin="2" IsEnabled="{Binding Path=HasChanges}" Click="bSubmit_Click" />
</Grid>
</Grid>
When the view is displayed in a singular Frame, all is well. But when it is displayed on a page with TWO frames, odd things begin to happen. If the user grabs the splitter and moves it all the way to the top, beyond the frames boundaries, the DataForm will expand endlessly. This isn't a big issue, but it looks ugly, and makes the buttons at the bottom vanish from sight.
What's going on here? Why is this happening? How can I prevent this behaviour?

Apparently my Google-fu was weak.
I found this today, and it describes the exact same problem I had, as well as a possible solution.
Still, I didn't expect this to be a bug in SL...

Related

Split the window vertically in XAML

I want to split my window in 2 parts side by side, like the picture below. On each side I have a SwapChainPanel and a StackPanel with a TextBlock, a TextBox and a Button.
Below that, I have a console (TextBlock) which takes up the entire width of the window.
How can I do that in XAML?
I have this but it does not split the window into 2 equal parts:
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
</StackPanel>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" >
<TextBlock />
</StackPanel>
</StackPanel>
StackPanel are for stacking Items One after another or one below another. So you will not get exact split. For that you Need to use Grid.
I marked up a basic XAML based on your Screenshot.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Blue" BorderThickness="5,5,2.5,5" Grid.Row="0" Grid.Column="0" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_L" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 1: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Blue" BorderThickness="2.5,5,5,5" Grid.Row="0" Grid.Column="1" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_R" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 2: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Green" BorderThickness="5" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,5,0,0" Padding="5">
<TextBox Text="> Console" Foreground="Green" />
</Border>
</Grid>
Which Renders to

XAML set datagrid to top 90% of grid, buttons to bottom 10 % all in a tabitem

I have a TabItem which I want to display a DataGrid (MahApps.Metro) in the upper 90% of it and 2 buttons I want to display at the bottom 10% of it. This works when the window is fully enlarged, but when it is not, the scrollviewer is not visible and the controls and elements go off screen. Please help, I've been stuck for hours! Here is my code so far:
<TabItem Header="Queue" FontSize="15">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="77*"/>
<ColumnDefinition Width="24*"/>
</Grid.ColumnDefinitions>
<DataGrid x:Name="songdatagrid" VerticalAlignment="Stretch" ItemsSource="{Binding SongInfo}" VerticalScrollBarVisibility="Auto" AutoGenerateColumns="False" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
<DataGrid.Columns >
<DataGridTemplateColumn x:Name="songinfocolumn" Header="Song Info" Width=".6*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songInfo.Text}" Uid="{Binding SongInfo.Uid}" ToolTipService.ToolTip="Double click to open song in Youtube." MouseLeftButtonDown="tb_MouseLeftButtonDown5" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="requestercolumn" Header="Requester" Width=".18*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songReq.Text}" Uid="{Binding songReq.Uid}" ToolTipService.ToolTip="Double click to open requester's Twitch page." MouseLeftButtonDown="tb_MouseLeftButtonDown6" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="moveupcolumn" Header="Move Up" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding moveUp.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="moveup" ToolTipService.ToolTip="Click to move this song up in the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_arrow_up}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="deletecolumn" Header="Remove" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding delete.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="deleteSong" ToolTipService.ToolTip="Click to remove song from the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_delete}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="refresh" IsDefault="True" Background="White" Content="Refresh" Click="Button_Click" FontSize="16" Grid.Column="0" Grid.Row="1"/>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="clear" IsDefault="True" Background="White" Content="Clear List" Click="clearlist" FontSize="16" Grid.Column="1" Grid.Row="1"/>
</Grid>
</TabItem>
I had to add this to the top to get the Metro horizontal scrollbar working on the tabholder. Other than this, there are just more tabitems.
<TabControl x:Name="tabholder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightBlue"
SelectionChanged="TabControl_SelectionChanged" >
<TabControl.Template>
<ControlTemplate TargetType="TabControl">
<StackPanel>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<TabPanel x:Name="HeaderPanel"
Panel.ZIndex ="1"
KeyboardNavigation.TabIndex="1"
Grid.Column="0"
Grid.Row="0"
IsItemsHost="true"/>
</ScrollViewer>
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"/>
</StackPanel>
</ControlTemplate>
</TabControl.Template>
The StackPanel and the other Grid panels you have in there are redundant and causing your issues. Also your fixed Width & Height in templates that have their own set size attributes for things like Height are going to give unwanted results. You should only need something like this to accomplish your goal.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<DataGrid Grid.ColumnSpan="2">...</DataGrid>
<Button Grid.Row="1" Content="Button 1"/>
<Button Grid.Row="1" Grid.Column="1" Content="Button 2"/>
</Grid>
Cheers!
The StackPanel was causing the issues, everything works now! :D

UWP TextBox won't stretch in StackPanel

I have a TextBlock and TextBox controls inside StackPanel, and I need to stretch TextBox to resize by the parent size in UWP.
<StackPanel Grid.Column="0" Grid.Row="1" Orientation="Horizontal">
<TextBlock Text="Name:" VerticalAlignment="Center" Width="130" />
<TextBox VerticalAlignment="Center" HorizontalAlignment="Stretch" />
</StackPanel>
This not works.. Any ideas?
The problem is the stack panel will only stretch to the size of the child elements so in your example you will only see one Textblock of 130 pixels and you will not see the TextBox.
To get the functionality you desire you should use a grid with two columns one 130 pixels and the other being * to fill up the entire column space that is available.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name:" VerticalAlignment="Center" Width="130" />
<TextBox Grid.Row="0" Grid.Column="1"/>
</Grid>
I usually wrap a TextBlock and TextBox pair inside a DockPanel
<DockPanel Grid.Column="0" Grid.Row="1" >
<TextBlock Text="Name:"
VerticalAlignment="Center"
Margin="5"
/>
<TextBox VerticalAlignment="Center"/>
</DockPanel>
Edit
For UWP which doesn't have DockPanel:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="Name:"
VerticalAlignment="Center"
Margin="5"
/>
<TextBox Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Stretch" />
</Grid>
</Grid>
I worked out a similar problem in UWP
<StackPanel Margin="{StaticResource SmallTopBottomMargin}" Orientation="Vertical">
<TextBlock Text="Project Name:" />
<TextBox /> <--full width
<TextBlock Text="Exported Template:" /> <--full width
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox /> <--max width - button width
<Button Grid.Column="1">...</Button>
</Grid>

Width of controls inside listbox not changing after orientation change

I have a grid inside stackpanel which is inside a listbox.
This grid has a few control elements like rectangles and textblocks.
They stretch to the entire width in portrait but not in landscape.
Snapshot of emulator
This is the XAML:
<ListBox Name="PassList" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<Grid Name="StackPanelWidth" Width="{Binding ElementName=PassList, Path=ActualWidth}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="{Binding ElementName=StackPanelWidth, Path=ActualWidth}"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="White"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
RadiusX="10"
RadiusY="10"
/>
<Rectangle Fill="White"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,10,0,0"
/>
<Rectangle Fill="DarkGray"
Grid.Row="0"
Grid.Column="1"
Height="1"
VerticalAlignment="Bottom"
/>
<TextBlock Name="Country"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Left"
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="{Binding Country}"
Foreground="Black"
FontWeight="Bold"
/>
.............
.............
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Is there any thing wrong with my code?
Any help will be appreciated.
Thanks.
why are you doing this?
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="{Binding ElementName=StackPanelWidth, Path=ActualWidth}"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
Here you are somehow specifying the width because of which its not resizing.
Also the stackpanel will automatically adjust to its child width, so no need to specify binding if thats what you were trying to do.

Where do I place busyindicator to wrap the whole page, so no control is enabled until activity is completed

I am creating an app in Silverlight 4 with MVVM Light.
At present I have a page with many controls ie. StackPanels, Listbox, TexBlocks and Buttons. I have a busyindicator on the page that is bound to a viewmodel. When a button is clicked to say retrieve data from the database the busyindicator displays and vanishes when the call is completed.
This all works as it should.
What I want to happen is that the whole page is wrapped in the busyindicator so that the page dims and nothing works until the event is completed. I have read that you just wrap the control inside the Busyindicator.
No matter where I place the opening of the indicator I get blue lines showing 'The property Content is set more than once.'
I have posted the code below, could anyone explain where to put the indicator code.
<Grid.RowDefinitions>
<RowDefinition Height ="0" />
<RowDefinition Height ="30" />
<RowDefinition Height ="60" />
<RowDefinition Height ="Auto" />
<RowDefinition Height ="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Header" Width="353" Margin="0 0 0 0" Height="30" />
<StackPanel Grid.Row="2" VerticalAlignment="Center" Orientation="Horizontal" >
<Button Grid.Row="2" Grid.Column="0" Content="GetData" Height="35" Width="130" HorizontalAlignment="Left" Margin="0,0,0,0" Command="{Binding GetData}"></Button>
<!-- <toolkit:BusyIndicator Width="150" Height="50" IsBusy="{Binding IsBusy}" BusyContent="Searching ..." /> -->
</StackPanel>
<ListBox x:Name="MyListBox" Grid.Row="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Content="Delete" VerticalAlignment="Center"
Command="{Binding Delete}"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Grid.Row="4" Margin="5,10,0,0" Text="{BindingMessage}"></TextBlock>
</Grid>
You need to put all the content inside the user control as shown below:
<toolkit:BusyIndicator Width="150" Height="50" IsBusy="{Binding IsBusy}" BusyContent="Searching ...">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height ="0" />
<RowDefinition Height ="30" />
<RowDefinition Height ="60" />
<RowDefinition Height ="Auto" />
<RowDefinition Height ="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Header" Width="353" Margin="0 0 0 0" Height="30" />
<StackPanel Grid.Row="2" VerticalAlignment="Center" Orientation="Horizontal" >
<Button Grid.Row="2" Grid.Column="0" Content="GetData" Height="35" Width="130" HorizontalAlignment="Left" Margin="0,0,0,0" Command="{Binding GetData}"></Button>
</StackPanel>
<ListBox x:Name="MyListBox" Grid.Row="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Content="Delete" VerticalAlignment="Center" Command="{Binding Delete}"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Grid.Row="4" Margin="5,10,0,0" Text="{BindingMessage}"></TextBlock>
</Grid>
</toolkit:BusyIndicator>