I have a GridView declaration in XAML :
<Grid x:Name="ContainerGrid">
<GridView x:Name="GridView" ItemsSource="{Binding ViewModel}"
VerticalAlignment="Stretch" VerticalContentAlignment="Stretch">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Margin="8" MaxWidth="340">
<!-- removed for clarity -->
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
This GridView will displayed it's items in columns.
The problem is ScrollBar shown in right after column last column in row (1 in screenshot).
I want this ScrollBar align to it's Container ContainerGrid (2 in screenshot).
I set VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" in GridView but result is still the same.
UPDATE : My mistake, it's turn out that I have set HorizontalAlignment="Left" in parent container for Grid ContainerGrid.
And have you tried with HorizontalAlignment="Stretch" ? For me the stretch seems to be on the horizontal axis. Eventually, can you check with the Live Visual Tree (on Visual Studio) if there is any padding around the gridview ?
My mistake, it's turn out that I have set HorizontalAlignment="Left" in parent container for Grid ContainerGrid.
Related
https://learn.microsoft.com/en-us/windows/uwp/design/motion/parallax
this is microsoft instruction to use the paralax they use the ListView to demo the effect
but my data is stored inside the Grid.View so can anyone show me how to implement into it ?
Microsoft said that we can use this with any element that contain the scrollviewer
ParallaxView works with GridView. The Source property of ParallaxView is for setting the element that either is or contains the ScrollViewer that controls the parallax operation. Here in your code snippet it bind the ForegroundElement to Source property but no such an element in. You need to name the GridView as ForegroundElement .
<GridView
x:Name="ForegroundElement"
IsItemClickEnabled="True"
ItemClick="Grid_Clicked"
ItemsSource="{x:Bind Icons}">
...
</GridView>
Besides this, the code snippet should work well. If you still cannot see the effects it may be caused by items count is not enough. ScrollViewer inside the GridView or ListView only be shown when the host control's layout space is being constrained smaller than the expanded content size, details please see ScrollViewer in a control template. You could try to add more items to check the effects.
Additionally, edit the question to add more details and avoid to put it as an answer.
<GridView Grid.Row="1" ItemsSource="{x:Bind Icons}" IsItemClickEnabled="True" ItemClick="Grid_Clicked">
<GridView.ItemTemplate>
<DataTemplate x:DataType="data:Icon">
<StackPanel>
<Image Width="200" Height="200" HorizontalAlignment="Center" Source="{x:Bind ImageCover}"/>
<TextBlock FontSize="16" VerticalAlignment="Center" Text="{x:Bind Title}"/>
<TextBlock FontSize="10" VerticalAlignment="Center" Text="{x:Bind Room}"/>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
this is where the data stored
and this is the parallax
<ParallaxView Source="{x:Bind ForegroundElement}" VerticalShift="50">
<!-- Background element -->
<Image x:Name="BackgroundImage" Source="Assets/turntable.png"
Stretch="UniformToFill"/>
</ParallaxView>
Hello I have this Page XAML. The problem its that the text inside each PivotItem doesn't scroll correctly, just scroll a bit but no to the end. Pivot works correctly, you can flip Items Horizontally. How can i achieve the correct behavior on the scrolls?
<StackPanel>
<Pivot>
<PivotItem>
<ScrollViewer VerticalScrollMode="Enabled">
<StackPanel Margin="0,0,12,0">
<TextBlock HorizontalAlignment="Left"
TextWrapping="WrapWholeWords"
Foreground="#5D5B5D"
FontWeight="Light"
TextAlignment="Justify"
Margin="0,0,12,0"
Padding="0,0,4,0"
Text="Change for this a very large text so it can scroll!!! "></TextBlock>
<Button Content="OK"
HorizontalAlignment="Center"
Margin="0,18"
Padding="42,4"></Button>
</StackPanel>
</ScrollViewer>
</PivotItem>
<PivotItem>
<ScrollViewer VerticalScrollMode="Enabled">
<StackPanel Margin="0,0,12,0">
<TextBlock HorizontalAlignment="Left"
TextWrapping="WrapWholeWords"
Foreground="#5D5B5D"
FontWeight="Light"
TextAlignment="Justify"
Margin="0,0,12,0"
Padding="0,0,4,0"
Text="Change for this a very large text so it can scroll!!! "></TextBlock>
<Button Content="OK"
HorizontalAlignment="Center"
Margin="0,18"
Padding="42,4"></Button>
</StackPanel>
</ScrollViewer>
</PivotItem>
</Pivot>
From your code I saw that you use a StackPanel outside of the Pivot control, and you didn't set the orientation property, so by default the StackPanel stacks items vertically from top to bottom in the order they are declared. This will influence the Vertical-scroll-mode ScrollViewer inside of it.
A ScrollViewer works when its content's size bigger than the ScrollViewer's size, when a ScrollViewer is inside of a StackPanel, it has no limit of size, the size will fit the child inside of it, so can't a ScrollViewer work correctly.
In this case, you can change the StackPanel outside of your Pivot to Grid, it will solve the problem, or you can give your ScrollViewers a limit height like <ScrollViewer VerticalScrollMode="Enabled" Height="300">, this can also solve the problem.
I have a Windows Phone 8 listpicker that I'm trying to change the background color of, however, it only seems to change the item background and not the dropdown box background as you can see in the screen capture. The dropdown box seems to be binded to the WP8 theme. How can I change the background of the entire dropdown box and not just each individual item?
<toolkit:ListPicker x:Name="BackgroundListPicker" Background="Black" ItemsSource="{Binding BackgroundsList}">
<toolkit:ListPicker.ItemTemplate >
<DataTemplate x:Name="BackgroundItemTemplate" >
<Grid HorizontalAlignment="Stretch" Background="Black" VerticalAlignment="Stretch" Margin="0,0,0,0">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding BackgroundThumb}" Width="30" Height="30" HorizontalAlignment="Left" />
<TextBlock Text="{Binding BackgroundName}" Foreground="White" Margin="12,0,0,0" HorizontalAlignment="Right"/>
</StackPanel>
</Grid>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
</toolkit:ListPicker>
So your issue was that you were attempting to apply an image to an item. When you needed to hit the control itself that the items populate via ItemsPresenter so by pulling out the default style template for the control, and either making a place to pass in your image for an instance, or placing one directly into the template itself. You get your resulting background image for the ListPicker background to fall behind the items populating it.
Glad you found your remedy! Cheers.
i'm using the textblock to display the content,but for the long content, it just cut off and not display the content fully while i'm sure that the i filled the content string. Pls show me where my code is wrong. Thanks
Link of the my screen: www.flickr.com/photos/37903269#N05/15332152972/
my xaml code :
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<!-- <phone:WebBrowser VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Name="webBrowser1" /> -->
<ListBox Name="Listbox_DetailPage">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Text="{Binding Content}"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextNormalStyle}"
HorizontalAlignment="Center"
/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
I executed the code shared and it seems to wrap text as shown in the screen shot below.
The screenshot you shared seems to have vertical cropping of the text as well. For that, we can set the ScrollViewer.VerticalScrollBarVisibility to 'Auto' with proper Height given.
Also, for your additional knowledge or may be future use, here are some stackoverflow questions which explains the text 'NOT WRAPPING' issue for StackPanel
TextBlock TextWrapping not wrapping inside StackPanel
TextBlock TextWrapping not wrapping
actually, i fixed it.Because of the limitation of sing UI: 4096px limit of size. So there is a need to split the long content in the more than one TextBlock or you can create a scrollabe textbock as here
I've got a long list selector.
All I want to do is to align two elements inside the ItemTemplate:
1. a button to the right with a given, fixed width
2. a text panel to the left that fills the remaining space of the display.
But unfortunately the text panel is not strechted and the button is aligned to right end of text of the text panel. :(
This is my code:
<DataTemplate x:Key="AddrBookItemTemplate">
<StackPanel Orientation="Horizontal" Name="DummerContainer" HorizontalAlignment="Stretch">
<TextBlock FontWeight="Bold" Text="{Binding Name}" HorizontalAlignment="Stretch"/>
<Button HorizontalAlignment="Right" Width="120"/>
</StackPanel>
</DataTemplate>
and
<phone:LongListSelector
HorizontalAlignment="Stretch"
x:Name="AddrBook"
JumpListStyle="{StaticResource AddrBookJumpListStyle}"
Background="Transparent"
GroupHeaderTemplate="{StaticResource AddrBookGroupHeaderTemplate}"
ItemTemplate="{StaticResource AddrBookItemTemplate}"
LayoutMode="List"
IsGroupingEnabled="true"
HideEmptyGroups ="true"/>
So, this is my question: How can I align the two elements correctly?
That's a result of using a horizontal StackPanel...
Use a Grid rather than a StackPanel in your DataTemplate. Then you can define the ColumnDefinitions to assign the space as you require, i.e.:
define column 0 as Width="*" and put your TextBlock in it
define column 1 as Width="Auto" put your Button in it.
Afaik, Stackpanel is faster than Grid. So, i decided to find out the root of the problem. And i found it here: http://y2bd.me/blog/2013/08/16/fixing-alignment-issues-with-datatemplateselector/
Works fine for me.