I have this XAML on my windows phone:
<phone:PanoramaItem Header="{Binding LocalizedResources.balance, Source={StaticResource LocalizedStrings}}">
<StackPanel Margin="15,0,0,0" >
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid>
<StackPanel x:Name="AccountsInfo" Grid.Column="1">
</StackPanel>
<StackPanel Grid.Column="2">
<local:RateChart x:Name="rateChart" Height="324" Margin="-12,25,0,0" Width="417" />
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</phone:PanoramaItem>
In AccountsInfo Stackpanel I have like 5 accounts added programatically and RateChart is a chart. However, my rate chart should be below all the accounts and at the moment it is right in top of the screen and overlays first accounts. I don't know how to do the orientation.
Thanks for all the answers.
Looks to me like all you need is something like this. We get rid of the unnecessary panels, actually specify to your second StackPanel where it needs to be positioned within the parent Grid while ditching some unnecessary values on other properties. Hope this helps.
<phone:PanoramaItem Header="{Binding LocalizedResources.balance, Source={StaticResource LocalizedStrings}}">
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto">
<RowDefinition Height="Auto">
</Grid.RowDefinitions>
<StackPanel x:Name="AccountsInfo">
</StackPanel>
<StackPanel Grid.Row="1">
<local:RateChart x:Name="rateChart"
Width="417"
Margin="0,25,0,0" />
</StackPanel>
</Grid>
</ScrollViewer>
</phone:PanoramaItem>
Related
I have a page with lots of data so I need to use scrollviwer because of overflow items.
In this page I have something like list view (I made that) that has lots of items so I need to use scrollviewer for this list too.
So I have 2 vertical scrollviewer:
1) for all page items.
2) for My list view.
I made this app for windows phone 8.1. When I want to scroll in my list view I cant because of all page scrollviewer.
How can I solve that?
My code:
<ScrollViewer x:Name="ScrollViewerAllPage" Grid.Row="1" Grid.Column="0" Background="White" HorizontalScrollBarVisibility="Visible" ZoomMode="Disabled">
<Grid>
<StackPanel x:Name="StackMain" Orientation="Horizontal" Visibility="Collapsed">
...
<ScrollViewer x:Name="ScrollViewerReport" ScrollViewer.VerticalScrollMode="Enabled" Margin="32,0" Background="White" VerticalScrollBarVisibility="Visible" ZoomMode="Disabled" PointerPressed="ScrollViewerReport_PointerPressed">
<Grid x:Name="StackPanelReport" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="10,0" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="75" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation = "Vertical">
...
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="1" Orientation = "Vertical">
...
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="2" Orientation = "Vertical">
...
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="3" Orientation = "Vertical">
...
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
I am sorry for bad English.
Thanks.
So I am having some trouble getting the binding of a lisbox height to work. I have a user control that holds a listbox, this box is dynamically populated on the fly but it seems that if too many items are added it extends past the boundaries of the parent objects and refuses to stop and use the scoll bar...
<UserControl x:Class="TransaltionModule.Views.NoteView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d">
<Grid>
<ListBox ItemsSource="{Binding noteList}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Column="0">
<TextBlock Text="Type :" VerticalAlignment="Center" FontSize="14" Width="65"/>
<TextBox Text="{Binding noteType}" Width="auto" IsEnabled="False" VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
<TextBlock Text="Date :" VerticalAlignment="Center" FontSize="14" Width="65"/>
<TextBox Text="{Binding timeStamp}" Width="auto" IsEnabled="False" VerticalAlignment="Center" FontSize="14"/>
</StackPanel>
<TextBlock Grid.Row="1" Text="{Binding text}" Grid.ColumnSpan="2"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
If i hardcode the maxheight property everything works as intended, but with the multiple display resolutions I will be working against that is not a solution I can use. Can anyone recommend a fix
You can bind it to an element by using Path=ActualHeight
For this to work don't forget to name the Grid containing the Listbox
Try something like this :
<Grid x:Name = "grdListBoxTest">
<ListBox x:Name="lstBoxTest"
MaxHeight="{Binding ElementName=grdListBoxTest, Path=ActualHeight}">
<!-- Your Listbox Stuff Here -->
</ListBox>
</Grid>
By doing this you link the height of the Listbox to it's parent Grid. That way if the grid's size changes the MaxHeight of the Listbox will change.
There are a few aesthetic problems with my GUI that I can't quite figure out. The first one is my mouse over. I have a TextBlock with a MouseUp Event attached to it and I want the cursor to change to a hand when I mouse over so in the xaml I used Cursor="Hand" as shown below
<TextBlock Grid.Row="1" x:Name="AttachFileTextBlock" Foreground="Blue"
HorizontalAlignment="Right" FontSize="16" MouseUp="AttachFileTextBlock_MouseUp"
Cursor="Hand">
<Underline>Attach Screen Shots</Underline>
</TextBlock>
However the hand only appears around the edges and furthermore the actual text is not clickable, only clicking the edges trigger the mouse up event.
My other problem is in my UserControl, a HorizontalScrollBar is appearing even though I clearly set HorizontalScrollBarVisibility="Disabled" in my ScrollViewer
Here is the complete xaml
<UserControl x:Class="Client.App.Support.ListOfScreenShots"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="520" d:DesignWidth="800">
<Grid>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
<ListBox Name="_listBox" ItemsSource="{Binding ''}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="550"/>
<ColumnDefinition Width="250"/>
</Grid.ColumnDefinitions>
<Image Name="_image" Grid.Column="0" Height="400" Width="550" HorizontalAlignment="Center" VerticalAlignment ="Center" Stretch="Uniform" Source="{Binding ''}"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Bottom" Name="_addscreenshot" Content="Select Screenshot"
Height="30" Width="150" Margin="3.5,0,3.5,7"/>
<Button Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Top" Name="_removescreenshot" Content="Remove Screenshot"
Height="30" Width="150" Margin="3.5,0,3.5,7"/>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
I am just starting to learn WPF in depth and I really really hate it right now. If this is supposed to be an improvement on other methods of creating UIs I can't even imagine what its predecessors were like. Hopefully it will all click some day.
When applying a itemsControl i found that logical scrolling (canContentScroll="true") no longer seems t be working.
With logical scrolling i mean viewing item per item when clicking for example 2 navigation buttons that moves the scrollviewer.
The content of the itemControl is as the following:
<Grid Height="70" Width="900">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftScrollRow2" Width="Auto"/>
<ColumnDefinition x:Name="HorizontalContentRow2" Width="*"/>
<ColumnDefinition x:Name="RightScrollRow2" Width="Auto"/>
</Grid.ColumnDefinitions>
<RepeatButton Content="left" x:Name="btnLeft" Grid.Column="0" Style="{DynamicResource RepeatButtonStyleLeft}" Click="btnLeft_Click"></RepeatButton>
<ScrollViewer Grid.Column="1" VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Hidden" x:Name="sv" CanContentScroll="True" Margin="0" Height="73" >
<ListBox x:Name="list1" ItemsSource="{Binding Reg, ElementName=Window}" Background="{x:Null}" BorderBrush="{x:Null}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button x:Name="TestButton" HorizontalAlignment="Center" Height="71" Width="151"
Margin="5,0,10,0" Style="{DynamicResource ButtonStyleTest}"
Click="TestButton_Click"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListBox>
</ScrollViewer>
<RepeatButton Content="right" x:Name="btnRight" Grid.Column="2" Style="{DynamicResource RepeatButtonStyleRight}" Click="btnRight_Click"></RepeatButton>
</Grid>
When i navigate the items that are being loaded in the stackpanel (buttons) only continues scrolling appears, and content slowly appears.
A possible solution to this would be using HorizontalOffSet but this involving giving a exactly distance which i think would not be a good solution at all.
Thanks in advance,
Jackz
I would go about this differently.
I would add the scroll bar in the style. Read this and see the note in the Scrollbar section.
http://www.wpfsharp.com/2012/03/18/itemscontrol-vs-listbox-vs-listview-in-wpf/
I got a Scrollviewer with an ItemsControl inside. The ItemsControl, depending on the number of items in it, can be scrolled or not with the SCrollViewer.
I have a Control that display some total values of all the items. This control needs to be just under the ItemsControl. If there is not many items, it will be just under the last, not on the bottom of the page, with a lot of space between.
I can't achieve to do that.
Has anyone any ideas ? Here some of my code :
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0">
<!-- This is my Total Control - just a Border for the example -->
<Grid Margin="0,4" MaxHeight="60" VerticalAlignment="Top" DockPanel.Dock="Bottom">
<Border Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
<ScrollViewer HorizontalContentAlignment="Stretch" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto"
>
<ItemsControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding Path=ListeQuestions}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<concUCQuest:UCQuestion HorizontalAlignment="Stretch" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
Here is a link to a picture of what i try to get
I tried DockPanel, Grid into Grid, but I've got out of ideas.
Thanks for your help !
Adding a VerticalAlignment="Stretch" to the Scrollviewer should do the trick.
<Grid>
<DockPanel LastChildFill="True">
<!-- This is my Total Control - just a Border for the example -->
<Grid DockPanel.Dock="Bottom">
<Border Background="Red" Height="10"/>
</Grid>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<ItemsControl HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ItemsControl.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</DockPanel>
</Grid>
This works for me.
You can also use a ListBox with a DataTemplate, instead of wrapping an ItemsControl with a ScrollViewer.