I'm trying to prevent scrolling in ListBox. Using ScrollViewer.VerticalScrollBarVisibility looks like great solution - scrolling is prevented... BUT! Content is shifted downward just I tap at the bottom side of the ListBox.
I'm trying to ask in similarly topic before duplicated issue (sorry, whom it may concern).
Here is my code:
<StackPanel Orientation="vertical">
<Grid Height="130" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" x:Name="itemIco1" Width="120" Height="120" HorizontalAlignment="Left"
Source="{Binding ImageURL}"
Stretch="Fill" CacheMode="BitmapCache" VerticalAlignment="Top" Margin="0,5,5,0" Visibility="Visible"/>
<ListBox Grid.Column="1" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<TextBlock
Name="TextBlockTitle"
Margin="0,0,0,0"
FontSize="26" FontFamily="Segoe WP Semilight" Foreground="{Binding TitleColor}"
TextTrimming="WordEllipsis" TextWrapping="Wrap"
Width="Auto" Height="auto" MaxHeight="96" VerticalAlignment="Top" FontWeight="{Binding Font}" Text="{Binding Title}" />
<TextBlock
Name="TextBlockBody"
Margin="0,0,0,0"
FontSize="26" FontFamily="Segoe WP Semilight" Foreground="#FF5C5A5A"
TextTrimming="WordEllipsis" TextWrapping="Wrap"
Width="Auto" Height="auto" MaxHeight="100" VerticalAlignment="Top" Text="{Binding Body}" FontWeight="{Binding Font}"/>
</ListBox>
</Grid>
<TextBlock x:Name="date" Height="16" Text="{Binding Date}" TextWrapping="Wrap" Margin="0,0,0,0" FontSize="16" FontFamily="Segoe WP Semilight" FontWeight="{Binding Font}" Foreground="Black" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
</StackPanel>
To resolve this issue try to set property IsHitTestVisible="False" in nested listbox, so it should be like this:
<ListBox IsHitTestVisible="False" Grid.Column="1" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
<TextBlock x:Name="TextBlockTitle" Margin="0,0,0,0" FontSize="26" FontFamily="Segoe WP Semilight" Foreground="{Binding TitleColor}" TextTrimming="WordEllipsis" TextWrapping="Wrap" Width="Auto" Height="auto" MaxHeight="96" VerticalAlignment="Top" FontWeight="{Binding Font}" Text="{Binding NewsTitle}" />
<TextBlock x:Name="TextBlockBody" Margin="0,0,0,0" FontSize="26" FontFamily="Segoe WP Semilight" Foreground="#FF5C5A5A" TextTrimming="WordEllipsis" TextWrapping="Wrap" Width="Auto" Height="auto" MaxHeight="100" VerticalAlignment="Top" Text="{Binding NewsBody}" FontWeight="{Binding Font}"/>
</ListBox>
Set the vertical alignment property of the listbox to Top.
not sure though, but this might help.
Related
Here is my code:
<ListView Grid.Row="1" x:Name="viewTicket" Style="{StaticResource ticketListBox}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Background="Transparent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Center" BorderBrush="{x:Null}" SelectionChanged="ViewTicket_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<Image Visibility="{Binding selectedCheck}" Name="check" Grid.Column="0" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" Source="../../Images/check-donatota.png" Stretch="None" MouseLeftButtonUp="Check_MouseLeftButtonUp"/>
<TextBlock Visibility="{Binding selectedQuantity}" Name="quantity" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding amount}"/>
<TextBlock Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Text="{Binding name}"/>
<TextBlock Visibility="{Binding selectedPrice}" Name="price" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding total, StringFormat=C}"/>
<Image Visibility="{Binding selectedTrash}" Name="trash" Grid.Column="2" Margin="0,0,15,0" HorizontalAlignment="Right" VerticalAlignment="Center" Source="../../Images/trash-donatota.png" Stretch="None" MouseLeftButtonUp="Trash_MouseLeftButtonUp"/>
</Grid>
<ListView
ItemsSource="{Binding ingredients}"
Grid.Row="1"
Margin="-5,0,0,0"
Name="viewTicketIngs"
IsHitTestVisible="False"
Style="{StaticResource ticketListBox}"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
Background="Transparent"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Center"
BorderBrush="{x:Null}"
SelectionChanged="ViewTicketIngs_SelectionChanged">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="4*"/>
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<TextBlock Visibility="Visible" Name="quantity" Grid.Column="0" Foreground="{DynamicResource GrayTextDonaTotaBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding amount}"/>
<TextBlock Margin="10,0,0,0" Grid.Column="1" Foreground="{DynamicResource GrayTextDonaTotaBrush}" HorizontalAlignment="Left" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding ing.name}"/>
<TextBlock Visibility="Visible" Name="price" Grid.Column="2" Foreground="{DynamicResource GrayTextDonaTotaBrush}" HorizontalAlignment="Right" VerticalAlignment="Center" TextWrapping="Wrap" Text="{Binding total, StringFormat=C}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I add data to the ListView viewTicket, but depending of a property I would like to change the ItemSource Binding of the ListView viewTicketIngs. In other words, is there anyway that I can use an if expression on the binding? Something like ItemsSource="{Binding IF(mode == 0) {ingredients} else {plates}}"
Change the Binding by a DataTrigger in a Style:
<ListView ...>
<ListView.Style>
<Style TargetType="ListView">
<Setter Property="ItemsSource" Value="{Binding plates}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding mode}" Value="0">
<Setter Property="ItemsSource" Value="{Binding ingredients}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
</ListView>
As I understand it, you sometimes dispaly plates, sometimes ingredients. Now there are triggers conditional display. WPF actually has a pretty wide support.
However what might be better is to have 2 different ViewModel classes and two (how I call them) "type targetting data tempaltes". Say you have these clases:
abstract class ViewModelItem { }
class Plate : ViewModelItem { }
class IngredientsList : ViewModelItem { }
The propety you exposie this in, would be set to ViewModelItem. In realtiy you would assign either a Plate or IngredientsList Instance.
Now you define two DataTemplates. A interesting thing about WPF is that if you do not specify a explicit Template, the Code will go out of it's way to try to find one. And it will do the matching via the DataType property of the Template (TargetType for Styles and similar). It works similar to what CSS does, with somebodies code going out of it's way to find a template to apply.
I have listbox control with custom data template. I get the collection from webservice and bind that collection to listbox. When i scroll the list box top to bottom my listbox rows are changed and text are concatenate.
Please see the below images
This is my first screen
when scroll top to bottom once again
please compare two images my rows are changed
<Grid Margin="30,20,0,20" x:Name="MeGrid" Loaded="MeGrid_Loaded" Visibility="{Binding Path=_isMyMessage, Converter={StaticResource BoolToVisibilityConverter}}">
<StackPanel >
<TextBlock HorizontalAlignment="Right" Foreground="#00c0d4" Margin="0,0,100,0" Text="{Binding Path=CreatedDate, Converter={StaticResource TimeSinceConverter}}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Grid Background="#ffffff" Height="auto" Width="auto" MaxWidth="300" MinWidth="50">
<StackPanel Background="White">
<RichTextBox Name="MeRich" Background="White" MaxHeight="600" Foreground="Red"
FontFamily="Segoe UI" Margin="10,0,10,0" VerticalAlignment="Center"
TextWrapping="Wrap" Height="auto"
Width="auto" MinWidth="50"
MaxWidth="300"
local:Properties.Html="{Binding Path=MessageText}">
</RichTextBox>
<readMore:Readmore Source="{Binding Path=MessageText}" Visibility="{Binding ActualHeight,
ElementName=MeRich, Converter={StaticResource ReadMoreVisibilityConverter}}" ></readMore:Readmore>
<!--<TextBlock Margin="10,0,10,0" VerticalAlignment="Center" Foreground="Black" TextWrapping="Wrap" Height="auto" Width="auto" MinWidth="50" MaxWidth="300" Text="{Binding Path=MessageText}"
/>-->
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding Path=AttachmentList}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="0,5,0,5">
<Button Click="Image_Download" Loaded="Button_Loaded" Tag="{Binding .}" Width="80" Height="80" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" VerticalAlignment="Center" >
<ContentControl Content="{TemplateBinding Content}"/>
</Border>
</ControlTemplate>
</Button.Template>
<Image Source="/Resources/Drawable/c_image.png" Tag="{Binding .}" />
</Button>
<ProgressBar VerticalAlignment="Bottom" IsIndeterminate="true" Visibility="Collapsed" Style="{StaticResource CustomIndeterminateProgressBar}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
<Rectangle Margin="20,0,0,0" VerticalAlignment="Top" RadiusX="50" RadiusY="50" Width="80" Height="80">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Path=UserPictureURL}"/>
</Rectangle.Fill>
</Rectangle>
</StackPanel>
</StackPanel>
</Grid>
So I have this XAML as my UserControl. I have an Expander for each property I need to use. In the Header property of the Expander I've done binding to a DataTemplate to use a Image Button. What I need is to edit the fields inside the Expander (put them enabled) when I click the Image Button. But since it is inside of a DataTemplate I don't see the way to ask for it's "major parent" (Expander) and then ask the parent (Expander) to enable the fields.
This is the code of my XAML (the variables are in Spanish)
<UserControl x:Class="Guardian_GUI.Vistas.Recursos.AcordionSupertipos"
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="700" d:DesignWidth="1500">
<UserControl.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid Name="conten" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding}" Margin="15 8 15 0" ></TextBlock>
<Button Click="EditarValores" Background="Transparent" Template="{DynamicResource imagenBoton}" Grid.Column="1"/>
</Grid>
</DataTemplate>
<Style TargetType="DockPanel" x:Key="CeldaPropiedades">
<Setter Property="Background" Value="#d08e38"/>
<Setter Property="Margin" Value="5" />
<Setter Property="MinHeight" Value="35" />
</Style>
<Style TargetType="DockPanel" x:Key="CeldaValores">
<Setter Property="Background" Value="#d08e38"/>
<Setter Property="Margin" Value="5" />
<Setter Property="Height" Value="35" />
</Style>
</UserControl.Resources>
<Grid>
<ScrollViewer Name="scroll" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Grid.Row="2" Margin="0 0 0 40">
<StackPanel >
<ItemsControl Name="lista" BorderThickness="0"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding ListaSuperTiposEnumerados}" Margin="0" Padding="0" Background="Transparent">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Header="{Binding Nombre}" BorderThickness="1" Width="1450" HeaderTemplate="{DynamicResource DataTemplate1}" BorderBrush="#8b8b8b" FontFamily="Myriad Pro" FontStyle="Italic"
FontSize="18" Foreground="#f2f2f2" Background="#333333" VerticalAlignment="Top" Padding="10" >
<ScrollViewer Height="400" ScrollViewer.VerticalScrollBarVisibility="Auto" Margin="-10,-10" >
<StackPanel>
<StackPanel Margin="0 20 0 0" >
<DockPanel Grid.Row="0" Grid.ColumnSpan="1" Background="#89673c" Margin="5" MinHeight="35">
<TextBlock Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="24" Text="Valores" Grid.Column="0" Grid.Row="0" Margin="0,0,107,0"/>
<CheckBox Content="Editar valores" Name="editadorValores" Margin="0 8 0 0" Foreground="#f2f2f2"/>
</DockPanel>
<Grid Margin="10,0,0,0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="440"/>
<ColumnDefinition Width="400"/>
<ColumnDefinition Width="160"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DockPanel Grid.Column="0" Grid.Row="1" Style="{StaticResource CeldaValores}" >
<TextBlock Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="20" Text="Id" Grid.Column="0" Grid.Row="1" Margin="0,0,107,0"/>
</DockPanel>
<DockPanel Grid.Column="1" Grid.Row="1" Style="{StaticResource CeldaValores}" >
<TextBlock Name="valores" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="20"
Text="Nombre" Grid.Column="1" Grid.Row="1" IsEnabled="{Binding ElementName=algod, Path=IsChecked}" Margin="0,0,107,0"/>
</DockPanel>
<DockPanel Grid.Column="2" Grid.Row="1" Style="{StaticResource CeldaValores}" >
<TextBlock Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="20" Text="Descripción" Grid.Column="2" Grid.Row="1" Margin="0,0,107,0"/>
</DockPanel>
<DockPanel Grid.Column="3" Grid.Row="1" Style="{StaticResource CeldaValores}" >
<TextBlock Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="20" Text="Valor" Grid.Column="3" Grid.Row="1" Margin="0,0,0,0"/>
</DockPanel>
</Grid>
<ItemsControl Name="lista_2" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ItemsSource="{Binding ValoresSuperTipo}" Margin="0 0 0 15" Padding="0" Background="Transparent"
>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="10,5,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="440"/>
<ColumnDefinition Width="400"/>
<ColumnDefinition Width="160"/>
</Grid.ColumnDefinitions>
<DockPanel Grid.Column="0" Style="{StaticResource CeldaValores}" >
<TextBox ToolTip="{Binding Id}" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="16"
Text="{Binding Id}" Grid.Column="0" Margin="0,0,0,0" Width="100" IsEnabled="{Binding IsChecked, ElementName=editadorValores}"/>
</DockPanel>
<DockPanel Grid.Column="1" Style="{StaticResource CeldaValores}" >
<TextBox ToolTip="{Binding Nombre}" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="16"
Text="{Binding Nombre}" Grid.Column="0" Margin="0,0,0,0" Width="400" IsEnabled="{Binding IsChecked, ElementName=editadorValores}"/>
</DockPanel>
<DockPanel Grid.Column="2" Style="{StaticResource CeldaValores}" >
<TextBox ToolTip="{Binding Descripcion}" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="16" Width="360"
Text="{Binding Descripcion}" Grid.Column="0" Margin="0,0,0,0" IsEnabled="{Binding IsChecked, ElementName=editadorValores}"/>
</DockPanel>
<DockPanel Grid.Column="3" Style="{StaticResource CeldaValores}">
<TextBox ToolTip="{Binding valor}" Effect="{DynamicResource sombra}" TextWrapping="Wrap" FontSize="16" Width="120"
Text="{Binding valor}" Grid.Column="0" Margin="0,0,0,0" IsEnabled="{Binding IsChecked, ElementName=editadorValores}"/>
</DockPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
<Button Content="Guardar" Style="{DynamicResource Boton_1}" HorizontalAlignment="Right" Width="120" VerticalAlignment="Bottom" Grid.Row="3" Click="BotonPersistir"/>
<Button Content="Volver" Style="{DynamicResource Boton_1}" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="120" Margin="0,0,120,0" Click="BotonVolver" />
</Grid>
</UserControl>
When the event runs I ask for the Parent and TemplatedParent but neither of them are the Expander I need.
private void EditarValores(object sender, RoutedEventArgs e)
{
Button boton = sender as Button;
var Parent = boton.Parent; //It returns a Grid
var TemplatedParent = boton.TemplatedParent; //It returns a ContentPresenter
}
I appreciate your help
from : this blog
you can run this method on your button to get the expander
as:
Expander expander = FindMyParentHelper<Expander>.FindAncestor(boton);
public static class FindMyParentHelper<T> where T : DependencyObject
{
public static T FindAncestor(DependencyObject dependencyObject)
{
var parent = VisualTreeHelper.GetParent(dependencyObject);
if (parent == null) return null;
var parentT = parent as T;
return parentT ?? FindAncestor(parent);
}
}
I have a listbox which is filled up with items taken from a data contract. I want to add a bit of xaml to the top of the listbox which takes data from another data contract. How do i go about doing this?
<phone:PivotItem>
<ScrollViewer>
<StackPanel>
<ListBox x:Name="StatusCommentsList"
Background="Transparent"
ItemsSource="{Binding StatusComments}"
u:ScrollViewerMonitor.AtEndCommand="{Binding FetchMoreStatusCommentsDataCommand}" VerticalContentAlignment="Top">
<!-- THIS DOESNT WORK-->
<ListBoxItem>
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding Notification.context.data.created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_by.name}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.created_on}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
<TextBlock TextWrapping="Wrap" Text="{Binding Notification.context.data.rich_value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</ListBoxItem>
<!-- /THIS DOESNT WORK -->
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Style="{StaticResource JamesTransparentButton}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="389"/>
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.thumbnail_link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1" Width="389" MaxWidth="389" Orientation="Vertical" >
<TextBlock Text="{Binding created_by.name}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding created_on}" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" />
<TextBlock TextWrapping="Wrap" Text="{Binding value}" HorizontalAlignment="Stretch" FontSize="30" VerticalAlignment="Top" Margin="0,0,0,5" Foreground="White" Width="389" MaxWidth="389" />
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
</phone:PivotItem>
I tried just adding a new item to the listbox but the data contract would mean i have to instantiate all the sub levels of objects and it would suckkk as they are different domains.
Keep in mind that i want the entire screen to scroll in union... so that it looks like one big long list, regardless of the first being like a default value.
Put the first item outside the ListBox and disable ScrollViewer for the ListBox so the whole thing will scroll together. Here's an example where the item is a simple TextBlock. You can change it to suit your requirement.
<ScrollViewer>
<StackPanel Orientation="Vertical">
<TextBlock Text="Item 1"/>
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding item}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</ScrollViewer>
I'm trying to create a listbox template (for the items). This is what I've got.
<Window.Resources>
<DataTemplate x:Key="ItemTemplate">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0">
<TextBlock Text="TEKS" FontSize="20" FontWeight="Bold" Background="#FF502F8F" Foreground="White" Width="{Binding Path=Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}}" TextAlignment="Center" />
<TextBlock Text="{Binding Level}" FontSize="24" Background="#FF058C44" HorizontalAlignment="Center" Width="{Binding Path=Width, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type StackPanel}}}" Foreground="White" TextAlignment="Center" FontFamily="Segoe UI Light" />
</StackPanel>
<TextBlock Grid.Column="1" Text="{Binding Owner}" FontSize="20" FontWeight="Bold" TextWrapping="Wrap" />
</Grid>
</DataTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SampleDataSource}}">
<ListBox ItemTemplate="{DynamicResource ItemTemplate}" ItemsSource="{Binding Collection}" Margin="44,39,82,103" Style="{DynamicResource ListBoxStyle}"/>
</Grid>
And this is image how it looks.
Can you see the textblock extends more the width? I want to show the string wrap inside the listbox. What am I doing wrong?
Disable horizontal scrolling:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" ...>
Enable text wrapping (already the case):
<TextBlock TextWrapping="Wrap" ...>