I've a split view (UWP) that inside a scrollviewer with horizontal scrolling enabled. The code shown below has a user control embedded with displays data in a horizontally stacked fashion. I've a header menu which upon clicked should open a split view from right to left. But, whenever there is a horizontal scrolling, the split view opened is not responsive. When i resize the window with splitview opened and horizontal scrolling enabled, I see the app not responsive. What should I do to make the split view response.
By default, I see the splitview responsive whenever there is no horizontal scrolling.
The user control (KanbanControl) shown below is basically a gridview that uses ItemsWrapGrid as it's panel template stacked horizontally
Things tried out:-
a) Tried to disable the horizontal scrolling when the split view is about to be opened, but it is of no help.
Any thoughts folks?
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
</ScrollViewer>
Remove the outer scroll viewer from the splitview and wrap it inside the user control Kanban control. This would make the app responsive.
Code snippet is as follows
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
KanbanControl.xaml
<Grid Margin="0,20,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
// Horizontally stacked listview goes here.
</ScrollViewer>
</Grid>
I want to put stackPanels side by side. Then in each stack panel, there are different controls. Now the first stack panel is working. It has textblocks and text boxs. Now I want to add a button on the second stack panel and so on. The question is that the second panel doesn't show the button's content. Not sure why?
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal" Width="300" HorizontalAlignment="Left" Margin="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"></RowDefinition>
<RowDefinition Height="25"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Year" TextAlignment="Center"></TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Week" TextAlignment="Center"></TextBlock>
<TextBlock Grid.Column="2" Grid.Row="0" Text="File Location" TextAlignment="Center"></TextBlock>
</Grid>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0" Margin="10">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
<ColumnDefinition Width="100"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Button Grid.Column="0" Grid.Row="0">
<TextBlock Text="Get Informations" TextWrapping="Wrap" TextAlignment="Center"></TextBlock>
</Button>
</Grid>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2" Grid.Row="0"></StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="1"></StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="2" Grid.Row="1"></StackPanel>
</Grid>
</StackPanel>
</StackPanel>
You are setting the width of the Stackpanel as 300, if you want a solution. either remove the stackpnael (the one that has 300 width) or fix the Grid inside that stackpanel to be 300
I have the following XAML:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
Right now the grid is at the center of the screen, I wabt it to be a little bit higher, I can do it with margin, but I don't want any propery with pixel in my page. Is there any other wahy to do it?
Thanks.
The easiest way to get your grid slightly above the centre without using Margins would be to put it in another Grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="1.2*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
</Grid>
Note the second RowDefinition
<RowDefinition Height="1.2*"/>
This means the second row will take slightly more of the available space than the first row and you can adjust to meet your needs.
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.
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>