How to use ScrollViewer the controls on binding? - xaml

Following code I had. I am using a Listbox using binding. Below the list box I have a button for submit. Able to scroll Listbox items only unable to scroll the button. Button is available at the bottom of the screen(not List). I want this button at the bottom of the Listbox?.
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="780" MaxHeight="1800" VerticalAlignment="Top">
<ScrollViewer.Content>
<Grid Grid.Row="0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ListBox Name="formDetails" ItemsSource="{Binding}" Grid.Row="0" Height="780" MaxHeight="1800">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question"
Text="{Binding Question, Mode=OneWay}"/>
<TextBox Name="TxTAnswer"
Text="{Binding Stringval, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource TextConverter}}"/>
<CheckBox Name="BoolVal"
IsChecked="{Binding BoolVal, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource YesNoConverter}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Grid.Row="1" Click="Button_Click" Content="Submit"/>
</Grid>
</ScrollViewer.Content>
</ScrollViewer>

Try this for button at the bottom of the Listbox:
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalAlignment="Top">
<StackPanel>
<ListBox Name="formDetails" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question"
Text="{Binding Question, Mode=OneWay}"/>
<TextBox Name="TxTAnswer"
Text="{Binding Stringval, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource TextConverter}}"/>
<CheckBox Name="BoolVal"
IsChecked="{Binding BoolVal, Mode=TwoWay}"
Visibility="{Binding DataType, Mode=OneWay, Converter={StaticResource YesNoConverter}}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Button Click="Button_Click" Content="Submit"></Button>
</StackPanel>
</ScrollViewer>
for button at the bottom of the page
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Visible" VerticalAlignment="Top">
<StackPanel>
<ListBox Name="formDetails" ItemsSource="{Binding}" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="Text">
<TextBlock Name="Txt_Question" Text="{Binding Q}"></TextBlock>
<TextBox Name="TxTAnswer" Text="{Binding A}"></TextBox>
<CheckBox Name="BoolVal" IsChecked="{Binding Val}"></CheckBox>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
<Button Click="Button_Click" Content="Submit" Grid.Row="1"></Button>
</Grid>

A few things:
You have defined your button as being in Grid.Row="1" which doesn't exist. You need to add a second row otherwise it will just appear in the same row as the ListBox.
Your entire page is within a ScrollViewer, is that really what you want? If you want the Button outside of the scrollviewer then just wrap the ListBox within the ScrollViewer, but that would be kind of pointless because a ListBox has its own ScrollViewer built in.

Related

SOLVED Pressing on ScrollViewer inside ListBox Item doesn't select the Item

I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>

XAML Material Design TabControl without dragablz

Hey where can I find a sample of a Material Design TabControl without dragablz? All samples are with dragablz... Like the picture below.
You can use MaterialDesignTabControl provided with MaterialDesignExtensions.
as #fruggiero said MaterialDesignInXamlToolkit doesn't have any styling for tabcontrol... But here you can achieve the same tabcontrol like functionality with the look you want,
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<materialDesign:ColorZone Mode="PrimaryMid">
<StackPanel Orientation="Horizontal" Margin="2">
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" x:Name="rbTab1" Margin="4" IsChecked="True" Content="TAB 1"/>
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" x:Name="rbTab2" Margin="4" Content="TAB 2"/>
<RadioButton Style="{StaticResource MaterialDesignTabRadioButton}" x:Name="rbTab3" Margin="4" Content="TAB 3"/>
</StackPanel>
</materialDesign:ColorZone>
<Border Grid.Row="1" BorderThickness="1 0 1 1" BorderBrush="{DynamicResource PrimaryHueMidBrush}" Padding="16">
<Grid>
<Grid Visibility="{Binding IsChecked, ElementName=rbTab1, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock Text="This is tab page 1 content" FontSize="16" FontWeight="Medium"/>
</Grid>
<Grid Visibility="{Binding IsChecked, ElementName=rbTab2, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock Text="This is tab page 2 content" FontSize="16" FontWeight="Medium"/>
</Grid>
<Grid Visibility="{Binding IsChecked, ElementName=rbTab3, Converter={StaticResource BooleanToVisibilityConverter}}">
<TextBlock Text="This is tab page 3 content" FontSize="16" FontWeight="Medium"/>
</Grid>
</Grid>
</Border>
</Grid>
The MaterialDesignInXamlToolkit actually does not provide styling for the tabcontrol.
So, you can only use the dragablz tabcontrol and configure it to your need.

UWP XAML GridView to Fill Vertical space

I have a page with 2 columns
Each column has controls contained in stackpanels
The stackpanel is contained in a boarder.
border
stackpanel
.....
gridview
/stackpanel
/boarder
I want the boarder to fill the vertical height without setting the minheight to a pixel value.
Meaning I do not want the boarder to grow and shrink with the gridview, it should stay the same size, filling the colunm and respecting its margins.
<StackPanel x:Name="RightColumn"
Grid.Column="1"
Margin="10,20,20,20">
<TextBlock FontWeight="Bold" Text="Tags" />
<Border BorderBrush="{StaticResource DGreen}"
MinHeight="500"
BorderThickness="2"
Padding="10">
<StackPanel >
<TextBox Width="120"
HorizontalAlignment="Left"
KeyDown="{x:Bind ViewModel.AddNewTag}"
PlaceholderText="Add New Tag"
Text="{x:Bind ViewModel.NewTagToAdd, Mode=TwoWay}" />
<TextBlock Margin="0,10,0,0"
FontWeight="Bold"
Text="Add Tags from this list" />
<GridView Margin="0,10,0,0" MaxHeight="416" VerticalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.SD.TagsAvailableForSelecting}"
SelectionChanged="{x:Bind ViewModel.AddTagToSelectedTags, Mode=OneWay}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="dat:TagDTO">
<Border Width="90" Background="{StaticResource DGreen}">
<TextBlock Margin="3"
Foreground="{StaticResource ContrastColorBrush}"
Text="{x:Bind TagName}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Border>
</StackPanel>
Change your First StackPanel to Grid. so that It can fill the complete available space. TextBox will go to first Row which is set as Auto and Second Border should go to Second Row which is set as *.
Below is a mockup from your example.
<Grid x:Name="RightColumn"
Grid.Column="1"
Margin="10,20,20,20">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" Text="Tags" Grid.Row="0" />
<Border BorderBrush="{StaticResource DGreen}" Grid.Row="1"
MinHeight="500" BorderThickness="2" Padding="10">
<StackPanel>
<TextBox Width="120"
HorizontalAlignment="Left"
KeyDown="{x:Bind ViewModel.AddNewTag}"
PlaceholderText="Add New Tag"
Text="{x:Bind ViewModel.NewTagToAdd, Mode=TwoWay}" />
<TextBlock Margin="0,10,0,0"
FontWeight="Bold"
Text="Add Tags from this list" />
<GridView Margin="0,10,0,0" MaxHeight="416" VerticalAlignment="Stretch"
ItemsSource="{x:Bind ViewModel.SD.TagsAvailableForSelecting}"
SelectionChanged="{x:Bind ViewModel.AddTagToSelectedTags, Mode=OneWay}">
<GridView.ItemTemplate>
<DataTemplate x:DataType="dat:TagDTO">
<Border Width="90" Background="{StaticResource DGreen}">
<TextBlock Margin="3"
Foreground="{StaticResource ContrastColorBrush}"
Text="{x:Bind TagName}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</StackPanel>
</Border>
</Grid>

GridView item not get selected for dragging in WindowsPhone 8.1

I am facing the problem with dragging(DragItemsStarting) the item from GridView ,item pressed does not gets selected for dragging and could not drag the item in WindowsPhone 8.1.
Please find the tried code to dag the Grid view item.
<GridView AllowDrop="True" CanDragItems="True" CanReorderItems="True" ItemsSource="{Binding Items}" SelectionMode="Single"
DragItemsStarting="gridview_DragItemsStarting" Drop="schedule_Drop" Grid.Row="2" x:Name="gridview" BorderThickness="1" BorderBrush="LightGray">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<GridViewItem>
<GridViewItem.Template>
<ControlTemplate>
<Border Margin="10,20,0,0" Height="70" Width="100" BorderBrush="LightGray" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.3*"/>
<RowDefinition Height="0.7*"/>
</Grid.RowDefinitions>
<TextBlock Margin="1" Text="Hi" Grid.Row="0" Foreground="#FF25A0DA" FontSize="10"/>
<TextBlock Margin="1" Text="Forum" Grid.Row="1" Foreground="Gray" TextWrapping="Wrap" FontSize="10"/>
</Grid>
</Border>
</ControlTemplate>
</GridViewItem.Template>
</GridViewItem>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
Pease share Suggestion to resolve this.
Regards,
Jeyasri M
You should set the ReorderMode property to enable reordering of gridviewitems. And also in the itemtemplate of the gridview you are creating a gridviewitem inside the gridviewitemtemplate.
Have you data template as below:
<GridView.ItemTemplate>
<DataTemplate>
<Border Margin="10,20,0,0" Height="70" Width="100" BorderBrush="LightGray" BorderThickness="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.3*"/>
<RowDefinition Height="0.7*"/>
</Grid.RowDefinitions>
<TextBlock Margin="1" Text="Hi" Grid.Row="0" Foreground="#FF25A0DA" FontSize="10"/>
<TextBlock Margin="1" Text="Forum" Grid.Row="1" Foreground="Gray" TextWrapping="Wrap" FontSize="10"/>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>

GridView how to style a group

I have a working GridView with a grouped items.
<GridView x:Name="ItemsGridView"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="None" ItemClick="ItemsGridView_ItemClick" IsItemClickEnabled="True">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="400" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="title" Text="{Binding Name}" TextWrapping="NoWrap" Grid.ColumnSpan="1" Grid.Column="0" Padding="5,0,0,0" HorizontalAlignment="Left"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Border Width="130" Background="{StaticResource CommonBlueBackground}" >
<TextBlock TextWrapping="Wrap" Text="{Binding Key}" Style="{StaticResource GroupHeader}" Margin="0"/>
</Border>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
Each group looks like this.
But I want it to look like this.
How do I style each group to have a line on the left hand side as pictured?
The groups in a GridView aren't actual controls, but rather a collection of item containers and header controls laid out in the ItemsPanel as you can see below.
The easiest solution would be to put a line on the left side of each item through updates to ItemContainerStyle.