ListBox template, hiding elements - xaml

I have a listbox template showing an image and three textboxes. You will see how are they distributed in the code below. My problem is that some items won't have an image and I want the text to fill the whole row in that case.
I've tried not to use a grid, to use a canvas, but I don't know why, when using a canvas inside a listbox, nothing is shown. I don't know if this is easy to accomplish. Here's the code:
<ListBox Grid.Column="0" Grid.Row="1" Background="White" HorizontalAlignment="Stretch" Name="itemList" VerticalContentAlignment="Stretch" SelectionChanged="listBoxSetmana_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="480">
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="17" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="3" Grid.Column="0" Grid.Row="0" BorderThickness="1" BorderBrush="#FFFF003F" Padding="1">
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="listImage" Width="36" Height="36" Source="{Binding thumbnail}" />
</Border>
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="0" Name="title" Foreground="Black" Text="{Binding title}" FontWeight="Bold" FontSize="20" />
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="1" Name="published" Foreground="Black" Text="{Binding published}" FontSize="13" />
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="2" Name="subtitle" Foreground="Black" Text="{Binding subtitle}" FontSize="16" TextWrapping="Wrap" />
<TextBlock Visibility="Collapsed" Text="{Binding id}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thank you!

There are several ways to bind this together.
One way is:
add some Padding to the Border
bind the Visibility of the Border to the thumbnail Property using an appropriate ValueConverter
change the width of Column 0 from "60" to "Auto" - then it will disappear when the image is Collapsed.

Related

Controls going outside of window

I'm attempting to make a "information" page, but when I get to a finished product this happens:
Video of application
So as you can see the poster of the movie and the description is fine to start with, but when the user attempts to use a different size than default it doesn't resize so the the user can see the same information.
Code:
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill" />
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<StackPanel Margin="80">
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick" Style="{StaticResource MaterialDesignRaisedLightButton}">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="{x:Bind Movie.Title}" />
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<StackPanel>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10" />
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100">
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
</StackPanel>
<StackPanel
MinWidth="300"
MaxWidth="600"
Padding="20">
<TextBlock Style="{StaticResource PageTitleStyle}" Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<TextBlock
Style="{StaticResource BodyTextStyle}"
Text="{x:Bind Movie.Overview}"
TextWrapping="WrapWholeWords" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
So in short, how do I keep the design, but make is so when the window changes size the image & text resizes to stay inside the window and stay visible.
Controls going outside of window
The problem is that when set root panel as StackPanel , the size of children element will be fixed. And it will not change as the window size changes. For solve the this, you could try to use Grid to replace. Please refer the following xaml layout.
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="Assets/hello.jpg"
Stretch="UniformToFill"
/>
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<Grid Margin="80" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="Grid Test Page"
/>
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<Grid
Grid.Row="1"
Margin="0,20,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10"
Source="Assets/hello.jpg"
/>
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100"
>
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
<StackPanel
Grid.Column="1"
MinWidth="300"
MaxWidth="600"
Padding="20"
>
<TextBlock Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<TextBlock Text="Defines a flexible grid area that consists of columns and rows. Child elements of the Grid are measured and arranged according to their row/column assignments (set by using Grid.Row and Grid.Column attached properties) and other logic." TextWrapping="WrapWholeWords" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</Grid>

UWP XAML Grid Resizes Unevenly With Equal Column Widths

I'm writing a UWP app and have a page with a full-page grid inside a scrollviewer with two even-width outer columns and two even-width inner columns. The right side of the page is a mirror of the left, and everything is aligned to the similar column on the opposite side. However, when I run my app and decrease the width, after a certain point only the third column shrinks. Before that point, all the columns adjust correctly. I don't have any width or minwidth properties set. If I set a fixed width on my grid, the columns resize to be even. I've tried changing which columns my elements are aligned to on various elements, removing the ScrollViewer, and double- and triple-checking for any min-widths being set anywhere.
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid MinWidth="800" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Viewbox Margin="90,27,100,0" Grid.RowSpan="3" Grid.Column="3" Height="63" VerticalAlignment="Top">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Away" FontSize="48" FontWeight="Bold"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
<Rectangle Fill="White" Margin="0,0,-1,0" Stroke="#FF252525" Grid.RowSpan="6" HorizontalAlignment="Right" Width="2" Grid.Column="1"/>
<Button x:Name="HomeGoalBtn" Margin="320,0,0.667,0.667" Grid.Row="3" Click="button_Click" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.ColumnSpan="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayGoalBtn" HorizontalAlignment="Stretch" Margin="0.333,0,320,0.667" Grid.Row="3" VerticalAlignment="Stretch" Click="button_Click" Grid.ColumnSpan="2" Grid.Column="2">
<RichTextBlock IsTextSelectionEnabled="False">
<Paragraph>
<Run Text="Goal" FontSize="48" Foreground="White" />
</Paragraph>
</RichTextBlock>
</Button>
<Button x:Name="AwayShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="0.333,24.333,25,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30,104.333,112,15" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="3"/>
<RichTextBlock Margin="10,10,0,0.667" Grid.Row="3" HorizontalAlignment="Left" Width="310">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.HomeScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<RichTextBlock Margin="0,0,0,0.667" Grid.Row="3" Grid.Column="3" HorizontalAlignment="Right" Width="320">
<Paragraph TextAlignment="Center">
<Run Text="{x:Bind ViewModel.AwayScore, Mode=OneWay}" FontSize="200"/>
</Paragraph>
</RichTextBlock>
<Button x:Name="HomeShotBtn" Content="Button" HorizontalAlignment="Stretch" Margin="30.333,24.667,0,14.333" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1" />
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Stretch" Margin="102,104.333,24.667,15" Grid.Row="4" VerticalAlignment="Stretch"/>
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Left" Margin="30.333,20.167,0,8" Grid.Row="5" VerticalAlignment="Stretch" Width="250" Click="button3_Click"/>
</Grid>
</ScrollViewer>
This is how my page looks in the designer:
OK... it appears to me that the layout is overconstrained - likely due to a lot of Blend arranging (a lot of crazy margins in there). If you want predictable layouts, I would recommend positioning the controls within the bounds of the grid sections that you expect to see them rather than trying to use margins to position them. Basically, which grid section do you want the element (Grid.Row=# Grid.Column=#), how many sections does it span (Grid.RowSpan=# Grid.ColumnSpan=#), which edges to align to (HorizontalAlignment=Left/Right/Center/Stretch VerticalAlignment=Left/Right/Center/Stretch), and how much space do you want from the edges (Margin=# # # #)?
So,
<Viewbox Margin="100,27,89.667,0" Grid.RowSpan="3" Height="63" VerticalAlignment="Top" Stretch="Uniform">
<RichTextBlock Foreground="White">
<Paragraph>
<Run Text="Home" FontSize="48" FontWeight="Bold" FontStretch="Normal"/>
</Paragraph>
</RichTextBlock>
</Viewbox>
Becomes,
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
Additionally, I'm not sure you need the viewboxes, richtextboxes, and paragraphs with runs for what you are doing, but I do not know the entire scope of what you're trying to accomplish.
Try something like the following:
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" >
<Grid MinWidth="800" MinHeight="600" Background="{ThemeResource SystemControlBackgroundAccentBrush}" ManipulationMode="All">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="69*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="76*"/>
<ColumnDefinition Width="69*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="27*"/>
<RowDefinition Height="62*"/>
<RowDefinition Height="27*"/>
<RowDefinition Height="399*"/>
<RowDefinition Height="340*"/>
<RowDefinition Height="105*"/>
</Grid.RowDefinitions>
<Viewbox >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Viewbox Grid.Column="3">
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Viewbox>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="1" >
<TextBlock Text="Home" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Row="3" Grid.Column="2" >
<TextBlock Text="Away" Foreground="White" FontSize="48" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" />
</Button>
<Button x:Name="HomeShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="1"/>
<Button x:Name="HomePenaltyBtn" Content="Button" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="0"/>
<Button x:Name="AwayShotBtn" Content="Button" Margin="15" HorizontalAlignment="Stretch" Grid.Row="4" VerticalAlignment="Stretch" Grid.Column="2"/>
<Button x:Name="AwayPenaltyBtn" Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="15" Grid.Row="4" Grid.Column="3"/>
<TextBlock Text="24" Grid.Row="3" FontSize="200" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock Text="12" Grid.Row="3" Grid.Column="3" FontSize="200" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Button x:Name="MenuBtn" Content="Button" Grid.Column="1" HorizontalAlignment="Stretch" Margin="15" Grid.Row="5" VerticalAlignment="Stretch" />
</Grid>
</ScrollViewer>

Vertical Textbox not filling all space - windows 8.1

I have this datatemplate for items in a Listview, its a bunch of rows, with 4 columns, and on first column im trying to add a text displayed in vertical. So far i have this, the text appears in vertical but for some reason it shows cutted in the ends.
<DataTemplate x:Key="ActionItemTemplate">
<Grid Height="150" HorizontalAlignment="Left" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="470"/>
<ColumnDefinition Width="470"/>
<ColumnDefinition Width="100"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Background="Tomato">
<TextBlock Text="In Progress" RenderTransformOrigin="0.5,0.5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" />
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
<Grid Grid.Column="1" Background="Blue"></Grid>
<Grid Grid.Column="2" Background="Green"></Grid>
<Grid Grid.Column="3" Background="Yellow"></Grid>
</Grid>
</DataTemplate>
Do i need to add anything ?
I used blend to modify your code, here is the result
and here is the code :
<Grid Grid.Column="0" Background="Tomato">
<TextBlock Text="In Progress In Progress In Progress " RenderTransformOrigin="0.5,0.5" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Height="19" Margin="-149.5,65.5,-155.5,65.5" UseLayoutRounding="False" d:LayoutRounding="Auto">
<TextBlock.RenderTransform>
<RotateTransform Angle="-90" />
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
you should try it

Rating Control in Windows store apps and Binding integer value to it

I have the followin
g code
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemsGridView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.RowSpan="2"
Padding="116,136,116,46"
SelectionMode="Single"
IsSwipeEnabled="false"
Visibility="Collapsed">
<GridView.ItemTemplate>
<DataTemplate>
<Border BorderBrush="DarkSeaGreen" BorderThickness="1">
<StackPanel HorizontalAlignment="Left" Width="250" Height="180" Background="SeaGreen">
<StackPanel VerticalAlignment="Top" >
<TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" TextWrapping="Wrap" MinHeight="40" FontSize="22" Margin="15,10,15,0"/>
</StackPanel>
<Grid Height="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
<RowDefinition Height="20*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="TotalMarks:" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,0,0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding TotalMarks}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Total Questions:" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,0,0" />
<TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding TotalQuestions}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" />
<TextBlock Grid.Row="2" Grid.Column="0" Text="Total attempts:" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,0,0" />
<TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding AttemptCount}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" />
<TextBlock Grid.Row="3" Grid.Column="0" Text="Ratings:" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" Margin="15,0,0,0" />
<TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding TestRating}" Foreground="White" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap" />
<!-- Here I want to add -->
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
I want to add a rating control in the grid in the data template so that its value can be bound with an integer variableTestRating. As I am new to databinding I don't how to do this. Please provide some assistance.
Thanks in advance.
It probably depends on the Rating control you are using. Here's how you would do it with Callisto's:
<callisto:Rating ItemCount="5" Value="{Binding TestRating}" />
Assuming the binding works for the TextBlock immediately above the spot where you want to insert ratings, this should work as well.
To facilitate any changes to be reflected in your source, you would need to make the binding two-way for the changes that are made in the control to be bound back to the source. So the appropriate change would be:
<callisto:Rating ItemCount="5" Value="{Binding TestRating, Mode=TwoWay}" />

Block Scrolling of one particular item in ScrollViewer

I have one static page displaying result of an event as given below.
<StackPanel Height="3700" >
<ScrollViewer Margin="10" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" Height="495" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="70"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="300"/>
<ColumnDefinition Width="170"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Border Grid.Row="1" Grid.ColumnSpan="5" Background="#FF3664F8"/>
<Border Grid.Row="8" Grid.ColumnSpan="5" Background="#FF3664F8"/>
<Border Grid.Row="2" Grid.ColumnSpan="5">
<Image Source="../Images/Divider.png" Margin="0,30,0,0" Height="7"/>
</Border>
<Border Grid.Row="3" Grid.ColumnSpan="5">
<Image Source="../Images/Divider.png" Margin="0,30,0,0" Height="7"/>
</Border>
<Border Grid.Row="4" Grid.ColumnSpan="5">
<Image Source="../Images/Divider.png" Margin="0,30,0,0" Height="7"/>
</Border>
<TextBlock Text="column1" Grid.Row="1" Grid.Column="0" TextWrapping="Wrap" FontSize="24" Padding="5" FontWeight="SemiBold"/>
<TextBlock Text="column2" Grid.Row="1" Grid.Column="1" FontSize="24" Padding="5" FontWeight="SemiBold" TextWrapping="Wrap"/>
<TextBlock Text="column3" Grid.Row="1" Grid.Column="2" FontSize="24" Padding="5" FontWeight="SemiBold" TextWrapping="Wrap"/>
<TextBlock Text="column4" Grid.Row="1" Grid.Column="3" FontSize="24" Padding="5" FontWeight="SemiBold" TextWrapping="Wrap"/>
<TextBlock Text="column5" Grid.Row="1" Grid.Column="4" FontSize="24" Padding="5" FontWeight="SemiBold" TextWrapping="Wrap"/>
<TextBlock Text="1" Grid.Row="2" Grid.Column="0" Padding="10" FontSize="20"/>
<TextBlock Text="3269" Grid.Row="2" Grid.Column="1" Padding="10"/>
<TextBlock Text="SINGH SURENDER" Grid.Row="2" Grid.Column="2" TextWrapping="Wrap" Padding="5"/>
<TextBlock Text="IND" Grid.Row="2" Grid.Column="3" Padding="5"/>
<TextBlock Text="1:05:44" Grid.Row="2" Grid.Column="4" Padding="5"/>
<TextBlock Text="2" Grid.Row="3" Grid.Column="0" Padding="10" FontSize="20"/>
<TextBlock Text="12784" Grid.Row="3" Grid.Column="1" Padding="10"/>
<TextBlock Text="UTRAINEN JUTSI" Grid.Row="3" Grid.Column="2" Padding="5"/>
<TextBlock Text="FIN" Grid.Row="3" Grid.Column="3" Padding="5"/>
<TextBlock Text="1:05:57" Grid.Row="3" Grid.Column="4" Padding="5"/>
<TextBlock Text="3" Grid.Row="4" Grid.Column="0" Padding="10" FontSize="20"/>
<TextBlock Text="3202" Grid.Row="4" Grid.Column="1" Padding="10"/>
<TextBlock Text="KUMAR SANTOSH" Grid.Row="4" Grid.Column="2" Padding="5"/>
<TextBlock Text="IND" Grid.Row="4" Grid.Column="3" Padding="5"/>
<TextBlock Text="1:06:17" Grid.Row="4" Grid.Column="4" Padding="5"/>
</Grid>
</ScrollViewer>
</StackPanel>
After every result there is an divider line for which I have used an image (Divider.png). We have 5 columns to display so used horizontal scroll viewer to display.
The problem is : My designer wants that , when we scroll horizontally the data should move but the divider line shound not move.
Is it possible somehow??
I'm not sure what is actually wanted as my understanding of the requirements doesn't make sense. If the dividers don't move but the content does then you could end up with the content overlapping the separator.
That said, if you want to stop something from scrolling just take it out of the scrollviewer. If you put the dividers behind the scrollviewer, then as long as you have a transparent background to the scrollviewer content you'll get the effect you're after.