I have a big main grid with several rows and columns. I want to place in one of these cells a vertical stackpanel. In this stackpanel there is a textblock and a scrollviewer. My problem is, that the stackpanel doesn't get limited by the cell, instead the stackpanel gets big enough to fit the whole scrollviewer.
How can I solve this?
EDIT: my xaml code:
<Grid x:Name="Grid1" Margin="120,0,0,0" Width="1244">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition Width="33*"/>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="40"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="71"/>
<RowDefinition Height="40"/>
<RowDefinition/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<StackPanel Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="0">
<TextBlock TextWrapping="Wrap" FontSize="48" Margin="0" VerticalAlignment="Top" Foreground="#FF0083FF" Text="Top 10:" HorizontalAlignment="Left" FontFamily="Segoe UI Light"/>
<ScrollViewer Margin="0,20,0,0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible">
<StackPanel>
<ListView x:Name="TopListView" ItemsSource="{Binding}" SelectionMode="None" Foreground="White" >
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel >
<TextBlock FontSize="32" Text="1" Foreground="#FF0083FF"/>
</StackPanel>
<TextBlock Text="{Binding Text}" Foreground="Black"
FontSize="16" Margin="0,0,0,0" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
</ScrollViewer>
</StackPanel>
</Grid>
Use another Grid instead of a StackPanel:
<Grid Grid.Column="3" Grid.Row="2" Grid.ColumnSpan="2" Margin="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock FontSize="48" FontFamily="Segoe UI Light"
Foreground="#FF0083FF" HorizontalAlignment="Left"
TextWrapping="Wrap" Text="Top 10:"/>
<ScrollViewer Grid.Row="1" Margin="0,20,0,0"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
...
</ScrollViewer>
</Grid >
Related
I'm new to WPF app developing and there is no such thing as RelativeLayout(Where I can arrange views relative to another view...like in Android).
My listview row Template looks like this.
Can someone help me with the code to design such template in XAML
EDIT : This is the code I've tried so far(Only for the first row i.e for name, time and date)...It doesn't seem to work.
<ListView x:Name="listView" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="752" Margin="20,282,0,0" VerticalAlignment="Top" Width="486" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="5*"/>
<!--<ColumnDefinition Width="120"/>-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Grid.Row="0" Grid.Column="1" FlowDirection="RightToLeft" Text="{Binding Time}" FontWeight="Bold" />
<!--<TextBlock Grid.Column="1" Background="Gainsboro" FlowDirection="LeftToRight" Text="{Binding Date}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />-->
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
The Time and Date appear beside each other. I thought using flow direction should help.
Try this :
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding Name}" FontWeight="Bold" />
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Time}" FontWeight="Bold" HorizontalAlignment="Right"/>
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Header}" FontWeight="Bold" />
<TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Text="{Binding Details}" FontWeight="Bold" />
</Grid>
</DataTemplate>
NOTE: Avoid some syntax error because I developed in notepad. It is not having any scrollbar as shown in image in your question. You can comment if any issue. You can apply text formatting and margin as per need.
I want do some things with my listview on my UWP project:
When a item of the listview is selected I want the entire row selected, also the subitems (cells) on the row should be not selectable.
I was trying with Fullrowselect but seem is not longer availiable in uwp.
my current xaml is:
<ListView x:Name="ListView1" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,164,0,0" BorderBrush="Black" BorderThickness="1" Background="WhiteSmoke" Visibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid Padding="0" Margin="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<TextBox x:Name="TextBox_Item" Grid.Column="0" Text="{Binding Path=Item}" TextWrapping="Wrap" BorderBrush="Black" BorderThickness="1.5" IsReadOnly="True" TextAlignment="Left"/>
<TextBox x:Name="TextBox_Name" Grid.Column="1" Text="{Binding Path=Name}" TextWrapping="Wrap" BorderThickness="1.5" BorderBrush="Black" IsReadOnly="True" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Any help is appreciated.
There's a property called "IsHitTestVisible, try changing it to false on your textboxes.
<ListView x:Name="ListView1" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,164,0,0" BorderBrush="Black" BorderThickness="1" Background="WhiteSmoke" Visibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" >
<ListView.ItemTemplate>
<DataTemplate>
<Grid Padding="0" Margin="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
</Grid.RowDefinitions>
<TextBox x:Name="TextBox_Item" Grid.Column="0" Text="{Binding Path=Item}" TextWrapping="Wrap" BorderBrush="Black" BorderThickness="1.5" IsReadOnly="True" TextAlignment="Left" IsHitTestVisible="False"/>
<TextBox x:Name="TextBox_Name" Grid.Column="1" Text="{Binding Path=Name}" TextWrapping="Wrap" BorderThickness="1.5" BorderBrush="Black" IsReadOnly="True" TextAlignment="Left" IsHitTestVisible="False"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have a C# WinRT/8.1 app that uses a ListView with a child stack panel to show items in a horizontal row. That works fine, except I am having the same problem discussed in this SO post:
WinRT Xaml ListView - Touch doesn't scroll well
Except worse. My items don't scroll even when the fingertip is pressed on the margin between items. Unfortunately I don't have a parent Panorama control or ScrollView control to blame. How can I fix this?
NOTE: I switched to a ListView from a GridView because of SO posts I read that indicated GridView's with horizontal items are problematic, which was the case for me.
Here is the XAML for the page:
<Page
<!-- headers snipped for brevity -->
<Page.Resources>
<Converters:DebugBindingConverter x:Key="DebugBindingConverter"/>
<Converters:VideomarkLocationToString x:Key="VideomarkLocationToString"/>
<common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
<DataTemplate x:Key="HorzVideomarksItemTemplate1">
<Grid d:DesignWidth="977" d:DesignHeight="746" Height="121" Width="252">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="52*"/>
<RowDefinition Height="23*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="txtLocation" TextWrapping="Wrap" Text="{Binding OffsetSecs, Converter={StaticResource VideomarkLocationToString}}" Grid.Row="2" />
<TextBlock x:Name="txtNote" Text="{Binding Text}" TextTrimming="CharacterEllipsis"/>
<Image x:Name="imgThumbnail" Grid.Row="1" Source="{Binding ThumbnailAsync}"/>
<!-- <TextBlock x:Name="txtTest2" HorizontalAlignment="Left" Margin="81,93,0,0" TextWrapping="Wrap"
Text="{Binding Videomarks, Converter={StaticResource DebugBindingConverter}}" VerticalAlignment="Top" Height="87" Width="150" FontSize="12"/> -->
</Grid>
</DataTemplate>
</Page.Resources>
<Grid x:Name="gridPage"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="25" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="897*"/>
<ColumnDefinition Width="469*"/>
</Grid.ColumnDefinitions>
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="347*"/>
<RowDefinition Height="231*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid x:Name="gridTopRow" Grid.ColumnSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,894,40" Tapped="pageTitle_Tapped"/>
<Button x:Name="exitButton"
Click="exitButton_Click"
Style="{StaticResource ClosePaneAppBarButtonStyle}" Margin="1065,27,0,9" Grid.Column="1" Width="100" Visibility="{Binding Main.IsDebuggerAttached, Converter={StaticResource BooleanToVisibilityConverter}, Mode=OneWay}" />
<Button x:Name="btnTest" Content="test" Grid.Column="1" HorizontalAlignment="Left" Margin="883,59,0,0" VerticalAlignment="Top" FontSize="36" Click="btnTest_Click" Visibility="Collapsed"/>
</Grid>
<WebView x:Name="webViewVideoPlayer" Grid.Row="1" ScriptNotify="ScriptNotifyPlayLocation" Margin="25" />
<Button x:Name="btnVideomark" Content="Bookmark" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="578,53,0,0" Height="54" FontSize="26.667" Click="btnVideomark_Click" Width="181"/>
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
<Border x:Name="borderAddVideomark" BorderThickness="5" Grid.ColumnSpan="2" Margin="369,53,319,112" Grid.Row="1" BorderBrush="#FF144989" CornerRadius="25" Opacity="0" IsHitTestVisible="False" Loaded="border_Loaded">
<Grid x:Name="gridAddVideomark" IsHitTestVisible="False" Grid.ColumnSpan="2" Grid.Row="1" Opacity="1" Grid.RowSpan="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="187*"/>
<ColumnDefinition Width="188*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="189*"/>
<RowDefinition Height="137*"/>
<RowDefinition Height="62*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="lblVideomarkLocation" Grid.Column="1" TextWrapping="Wrap" Text="TextBlock" Margin="40,10,10,10" FontSize="18.667"/>
<TextBox x:Name="txtVideomarkNote" Grid.Row="1" TextWrapping="Wrap" Grid.ColumnSpan="2" Margin="10,10,10,2"/>
<Button x:Name="btnOk" Content="OK" HorizontalAlignment="Left" Margin="92,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Click="btnOk_Click"/>
<Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Left" Margin="88,10,0,0" Grid.Row="2" VerticalAlignment="Top" Width="192" Foreground="White" FontSize="21.333" Height="45" Grid.Column="1" Click="btnCancel_Click"/>
<Rectangle x:Name="rectVideomarkThumbnail" Fill="#FFF4F4F5" Stroke="Black" Margin="10"/>
</Grid>
</Border>
</Grid>
</Page>
I am not sure which directions you are trying to scroll, but I think your problem will be fixed if you disable the StackPanel scroll and enable scrolling in both directions on the ListView.
<ListView
x:Name="listviewVideomarks" Grid.Row="2" Grid.ColumnSpan="2" Opacity="1" IsHitTestVisible="False" Margin="20"
ItemsSource="{Binding Videomarks.VideomarksCollection, Source={StaticResource Locator}}"
ItemTemplate="{StaticResource HorzVideomarksItemTemplate1}" SelectionMode="None"
ScrollViewer.HorizontalScrollMode="Auto" ScrollViewer.VerticalScrollMode="Auto"
>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel x:Name="stackVideomarksHorz" Orientation="Horizontal"
ScrollViewer.HorizontalScrollMode="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
</StackPanel>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
I have a expander which contains a grid in which I have a grid splitter.
The Document Outline and UI is like this
and here is the code.
<Grid x:Name="TopGrid" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MaxHeight="150"/>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Expander x:Name="CompanyDescriptionExpander" Grid.ColumnSpan="2"
VerticalAlignment="Top" IsExpanded="True" Background="Black" >
<Expander.Header>
<Grid Width="{Binding ElementName=CompanyDescriptionExpander,
Path=ActualWidth}" Background="Aquamarine">
<TextBlock Grid.Column="0" Text="Expander Header" Foreground="Black" />
</Grid>
</Expander.Header>
<Expander.Content>
<Grid x:Name="DescriptionGrid" MaxHeight="130" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" MinHeight="25" MaxHeight="25"/>
<RowDefinition Height="Auto" MinHeight="25" MaxHeight="120"/>
<RowDefinition Height="4" MinHeight="10" MaxHeight="10"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBox Grid.Column="0" Background="Orange" Grid.Row="0" Grid.RowSpan="2"
MinHeight="40" MaxHeight="120" x:Name="DescriptionText"
Text="TextBlock Content" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto" />
<Button x:Name="SaveIconButton" Grid.Column="1" Grid.Row="0" Width="20"
Height="20" VerticalAlignment="Top" />
<Button x:Name="CancelIconButton" Grid.Column="1" Grid.Row="1" Width="20"
Height="20" VerticalAlignment="Top" />
<GridSplitter ResizeBehavior="PreviousAndCurrent" ResizeDirection="Rows"
Grid.Row="2" Grid.ColumnSpan="2"
Height="10" MaxHeight="10" HorizontalAlignment="Stretch"
VerticalAlignment="Top" Background="Red" />
</Grid>
</Expander.Content>
</Expander>
<Button Grid.Row="1" Grid.Column="0" Margin="0,5,0,0" Height="20"
VerticalAlignment="Top" Background="Green" />
</Grid>
When we use grid splitter it expands
But it goes on even after textbox reaches its maximum height and gridsplitter goes behind button(green).
My problem scenario can be replicated copying my code in a project
I want that it should stop when textbox reaches its maximum height.
How to do that?
In your DescriptionGrid change the second rows MaxHeight from 120 to 95.
The combined max height of the three rows in that grid exceeds the max height of the grid itself.
So I have the following DataTemplate for a ListBox.ItemTemplate:
<DataTemplate x:Key="Tweet">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image
Grid.Column="0"
Source="{Binding ProfileImageURL}"
Width="50" Height="50"/>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock
Grid.Row="0"
FontSize="15"
FontWeight="Bold"
Text="{Binding User}"/>
<TextBlock
Grid.Row="1" TextWrapping="Wrap"
Text="{Binding Status}"/>
<DockPanel
Grid.Row="2">
<TextBlock
DockPanel.Dock="Left"
FontSize="10" TextWrapping="WrapWithOverflow"
Text="{Binding TimeAgo}" TextAlignment="Justify"/>
<TextBlock
DockPanel.Dock="Left"
FontSize="10" TextWrapping="Wrap"
Text="{Binding Source}"/>
</DockPanel>
</Grid>
</Grid>
</DataTemplate>
The problem is that it doesn't auto-size to the ListBox. The text gets clipped:
TwitBy preview
How to fix it?
Here's the listBox XAML definition:
<ListBox
x:Name="tweetsListBox"
Margin="3,0"
Grid.Row="1"
Background="{x:Null}" Grid.IsSharedSizeScope="True"
ItemsSource="{Binding}" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemTemplate="{DynamicResource Tweet}"/>
Any help would be appreciated.
Thanks
Try this:
<DataTemplate x:Key="Tweet">
<Grid Width="{Binding ElementName=tweetsListBox, Path=ActualWidth>">