Hello I have problem with my WPF page loading it took more than 2 seconds, my page contains 2 listview one listview contains ~70 items and second one contains ~355 items, of course everyone would say use virtualization and you done, yes it used but not on listview but on higher level, since my app use one scrollviever = one page method, I highly think due to this method virtualization does not work as expected since if it would work loading times be much better, one row took between 15-25ms to render
This is my problematic code:
<UserControl x:Class="app.OS.Tabs.Controls.SectionATabs"
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"
xmlns:helpButton="clr-namespace:app.COMMON.USERCONTROLS.HelpButton"
xmlns:Buttons="clr-namespace:app.COMMON.USERCONTROLS.Buttons"
mc:Ignorable="d"
Height="Auto"
Width="Auto"
MinHeight="120">
<VirtualizingStackPanel IsVirtualizing="True" ScrollViewer.CanContentScroll="True" >
<TextBlock MaxWidth="948" Text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." TextWrapping="Wrap" Style="{StaticResource GrayText}" Margin="0,15,0,7"/>
<ListView x:Name="DataList"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
VirtualizingPanel.IsVirtualizing="False"
ScrollViewer.CanContentScroll="False"
SelectionMode="Single" ItemContainerStyle="{StaticResource ListViewItemWithGridStandard}" BorderBrush="{x:Null}" Foreground="{x:Null}"
>
<ListView.View>
<GridView ColumnHeaderContainerStyle="{StaticResource HeaderRemover}" AllowsColumnReorder="False">
<GridViewColumn Width="400">
<GridViewColumn.CellTemplate>
<DataTemplate>
<DockPanel Height="47">
<TextBlock TextTrimming="CharacterEllipsis" ToolTip="{Binding Description,IsAsync=True,Mode=OneWay}" MaxWidth="360" Style="{StaticResource BlackText}" Height="21" DockPanel.Dock="Top">
<Run Text="{Binding Description,IsAsync=True,Mode=OneWay}"/>
<helpButton:HelpButton KeyToSearch="{Binding KeyToSearch,IsAsync=True,Mode=OneWay}" SectionToUse="sectionA" HeaderButton="False" />
</TextBlock>
<TextBlock Style="{StaticResource GrayText}" VerticalAlignment="Bottom" >Current: <Run Text="{Binding CurrentValue,IsAsync=True,Mode=OneWay}"/><LineBreak/>Good Value:<Bold>0%</Bold></TextBlock>
</DockPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="540">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel Width="528">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<StackPanel>
<Buttons:Buttons x:Name="DefaultValueButton" OnClick="DefaultValueButton_OnOnClick" ButtonContent="Default" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource SeparatorColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource GrayForText}" ActiveBackgroundBrush="{StaticResource HeaderColor}" ActiveBorderBrush="{StaticResource BorderColor}" ActiveTextForegroundBrush="{StaticResource BorderColor}" IsActive="{Binding IsDefault,IsAsync=True,Mode=OneWay}"/>
<TextBlock HorizontalAlignment="Center" Style="{StaticResource GrayText}">(<Run Text="{Binding DefaultValue,IsAsync=True,Mode=OneWay}"></Run>)</TextBlock>
</StackPanel>
<StackPanel Margin="9,0,0,0">
<Buttons:Buttons x:Name="RecommendedValueButton" OnClick="RecommendedValueButton_Click" ButtonContent="Recommended" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource SeparatorColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource GrayForText}" ActiveBackgroundBrush="{StaticResource HddColor}" ActiveBorderBrush="{StaticResource BorderColor}" ActiveTextForegroundBrush="{StaticResource WhiteColor}" IsActive="{Binding IsRecommended,IsAsync=True,Mode=OneWay}"/>
<TextBlock HorizontalAlignment="Center" Style="{StaticResource GrayText}">(<Run Text="{Binding RecommendedValue,IsAsync=True,Mode=OneWay}"></Run>)</TextBlock>
</StackPanel>
<Rectangle Width="1" Fill="{StaticResource SeparatorColor}" Height="24" Margin="16,0" VerticalAlignment="Top" />
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Buttons:Buttons x:Name="EnableCustomValuesButton" OnClick="EnableCustomValuesButton_Click" ButtonContent="Custom" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource SeparatorColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource GrayForText}" ActiveBackgroundBrush="{StaticResource CpuColor}" ActiveBorderBrush="{StaticResource BorderColor}" ActiveTextForegroundBrush="{StaticResource WhiteColor}" IsActive="{Binding IsCustom,IsAsync=True,Mode=OneWay}"/>
<StackPanel Orientation="Horizontal" Visibility="{Binding IsCustomEnabled,IsAsync=True,Mode=OneWay}" VerticalAlignment="Top" >
<Border CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource SeparatorColor}" Width="90" Margin="7,0">
<Border.Clip>
<RectangleGeometry RadiusX="5" RadiusY="5" Rect="0 0, 90 25"/>
</Border.Clip>
<TextBox Width="86" Height="23" x:Name="CustomValue" Text="{Binding CustomInputValue,IsAsync=True,Mode=OneWay}" BorderBrush="{x:Null}" HorizontalAlignment="Center" />
</Border>
<Buttons:Buttons x:Name="CustomValueApply" OnClick="CustomValueApply_Click" ButtonContent="Apply" ButtonData="{Binding Index,IsAsync=True,Mode=OneWay}" DisabledBorderBrush="{StaticResource BorderColor}" DisabledBackgroundBrush="{StaticResource WhiteColor}" DisabledTextForegroundBrush="{StaticResource BorderColor}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
</VirtualizingStackPanel>
This which may raise questions Buttons:Buttons is usercontrol inside it is border and inside border is textblock, helpButton:HelpButton is usercontrol inside it is border inside it is canvas with textblock and image(after some time image is disabled and on first time only image is shown only), headerremover sets GridViewColumnHeader visibility to collapsed, ListViewItemWithGridStandard is style which modify Control.Template adding inside Border and inside it adds GridViewRowPresenter, as you can see SectionATabs is tabcontrol > tabitem child, but tabcontrol is in page between page and tabcontrol is scrolviewer. page and scrollviewer has fixed height(maxheight also same) which is 501, also page is created way before user clicks for the first time, I think I told everything, now what can be done to reduce loading times? Thank you.
Related
I've developed an UWP app. There I have a part of the page with charts on the bottom (from Telerik) which sometimes changes the data an then have to be updated. This part of the page is separated from the top of the page by an GridSplitter.
By the way this page is the MainPage.
When I load the page the first time everything works well. Also updating the chart is working.
But if I navigate to another page and then navigate back to the MainPage the loading of the charts doesn't work. Also refreshing the charts with the data doesn't work.
I've tried to use charts from another library (not Telerik) - doesn't work.
I've build my own chart control - doesn't work.
Updating the controls by calling .UpdateLyout() also doesn't work.
The top of this part of the page does work (it's a GridView). But it seems that the part of the page which is fully or partly not completely shown on the top of this part the page (because I'm using an ScrollViewer) doesn't refresh. But in the code behind I can see that the data (also in the control) is loaded.
I've also completely deleted the not working UserControl from the containing StackPanel and then added another simple UserControl. But it doesn't refresh. Also I'm sure that I've deleted the chart from the StackPanel it will still be displayed and the new UserControl will not be displayed.
<Grid Name="grd_all_content">
<Grid.RowDefinitions>
<RowDefinition MinHeight="100" />
<RowDefinition Height="11" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ucs:SprintListUC x:Name="sprintListUC" Grid.Row="0" />
<controls:GridSplitter Foreground="White" Grid.Row="1" ResizeBehavior="BasedOnAlignment" ResizeDirection="Auto" Background="Gray" Height="11" HorizontalAlignment="Stretch" FontSize="13">
<controls:GridSplitter.Element>
<Grid>
<TextBlock HorizontalAlignment="Center" IsHitTestVisible="False"
VerticalAlignment="Center" Text=""
Foreground="Black" FontFamily="Segoe MDL2 Assets"/>
</Grid>
</controls:GridSplitter.Element>
</controls:GridSplitter>
<Grid Name="grd_graphics" Grid.Row="2" Background="{ThemeResource SystemAltMediumColor}" Padding="10,10,10,20" SizeChanged="Grid_SizeChanged"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<ScrollViewer x:Name="scrlvwr_charts">
<StackPanel Orientation="Vertical">
<TextBlock Foreground="#FFC31727" FontWeight="Bold" FontSize="20" Margin="0,0,0,20">Auswertung zu der aktuellen Sprint-Auswahl:</TextBlock>
<GridView HorizontalAlignment="Stretch" ItemsSource="{x:Bind Path=Evaluations}" SelectionMode="None">
<GridView.ItemTemplate>
<DataTemplate x:DataType="classes:Evaluation">
<StackPanel Orientation="Vertical" Padding="5" BorderBrush="Gray" BorderThickness="1" Width="250" Background="#FFC31727">
<TextBlock FontWeight="Bold" Foreground="White" Text="{x:Bind Path=Name}" />
<TextBlock Margin="10,5,0,0" Foreground="White" Text="{x:Bind Path=Value}" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<TextBlock Foreground="#FFC31727" FontWeight="Bold" FontSize="20" Margin="0,20,0,20">Sprints je KW (Gesamt und davon Erledigt):</TextBlock>
<telerik:RadCartesianChart PaletteName="DefaultLight" Height="250">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y"/>
</telerik:RadCartesianChart.Grid>
<telerik:BarSeries ItemsSource="{x:Bind SprintsDoneAmountData}">
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
</telerik:BarSeries.ValueBinding>
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Name"/>
</telerik:BarSeries.CategoryBinding>
</telerik:BarSeries>
<telerik:BarSeries ItemsSource="{x:Bind SprintsAmountData}" CombineMode="Cluster">
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
</telerik:BarSeries.ValueBinding>
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Name"/>
</telerik:BarSeries.CategoryBinding>
</telerik:BarSeries>
</telerik:RadCartesianChart>
<TextBlock FontSize="16" FontStyle="Italic" Margin="5,5,0,0">(gelb = gesamt; blau = erledigt)</TextBlock>
<TextBlock Foreground="#FFC31727" FontWeight="Bold" FontSize="20" Margin="0,20,0,20">Einsparpotential je KW (in €):</TextBlock>
<telerik:RadCartesianChart PaletteName="DefaultLight" Height="250">
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:CategoricalAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:RadCartesianChart.VerticalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.Grid>
<telerik:CartesianChartGrid MajorLinesVisibility="Y" StripLinesVisibility="Y"/>
</telerik:RadCartesianChart.Grid>
<telerik:BarSeries ItemsSource="{x:Bind SavingPotensialsData}">
<telerik:BarSeries.ValueBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Value"/>
</telerik:BarSeries.ValueBinding>
<telerik:BarSeries.CategoryBinding>
<telerik:PropertyNameDataPointBinding PropertyName="Name"/>
</telerik:BarSeries.CategoryBinding>
</telerik:BarSeries>
</telerik:RadCartesianChart>
</StackPanel>
</ScrollViewer>
</Grid>
The GridView ist updating. But the rest of the content of the StackPanel not. Also if I use another simple UserControl and not the Telerik Control.
That's a really tricky problem.
I have a XAML file which should make it possible to drag GridViewItems inside a GridView. Now I'm using an ItemSource for the GridView items and a DataTemplate to show them in the way I want them to be shown. That works. The following problem occured: Since I started using DataTemplate, the GridViewItems are not draggable. I can only drag the DataTemplate. That's weird, so the only part I can use to drag, is the area left and right of the GridViewItems because this is used for margin.
Why is the DataTemplate the 'draggable' control instead of the GridViewItem? I have tried numerous fixes but none seem to work out well.. I can ofcourse make it work without a DataTemplate, but it's much cleaner to use it like this.
<GridView Name="canvas" ItemsSource="{Binding GridviewItemList}" CanReorderItems="{Binding CanvasCanReorder}" CanDragItems="{Binding CanvasCanDrag}" ReorderMode="Enabled" AllowDrop="True" VerticalAlignment="Center" Width="660" Height="110" IsSwipeEnabled="False" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Disabled">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:MainPageItems">
<GridViewItem Name="{x:Bind GvName}" Margin="13 0 15 0">
<Border Width="100" Height="100" Background="{x:Bind BdBackground, Mode=OneWay}">
<TextBlock Height="60" Width="30" FontSize="40" Text="{x:Bind TbText, Mode=TwoWay}" Margin="{x:Bind TbMargin, Mode=TwoWay}"></TextBlock>
</Border>
</GridViewItem>
</DataTemplate>
</GridView.ItemTemplate>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="DragItemsCompleted">
<core:InvokeCommandAction Command="{Binding CanvasDragCompleted}"></core:InvokeCommandAction>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</GridView>
Thanks in advance!
When you add GridViewItem in the DataTemplate, there are two ListViewItemPresenter in one GridViewItem. Please check it in the Live Visual Tree.
In UWP apps for Windows 10, both ListViewItem and GridViewItem use ListViewItemPresenter; the GridViewItemPresenter is deprecated and you should not use it. ListViewItem and GridViewItem set different property values on ListViewItemPresenter to achieve different default looks.
For more info, please refer Item containers and templates.
If you want to set Margin to the GridViewItem, we should be able to set the GridViewItem style in the GridView.ItemContainerStyle.
For example:
<GridView Name="canvas" ItemsSource="{Binding GridviewItemList}" CanReorderItems="{Binding CanvasCanReorder}" CanDragItems="{Binding CanvasCanDrag}" ReorderMode="Enabled" AllowDrop="True" VerticalAlignment="Center" Width="660" Height="110" IsSwipeEnabled="False" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.HorizontalScrollMode="Disabled">
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:MainPageItems">
<Border Width="100" Height="100" Background="{x:Bind BdBackground, Mode=OneWay}">
<TextBlock Height="60" Width="30" FontSize="40" Text="{x:Bind TbText, Mode=TwoWay}" Margin="{x:Bind TbMargin, Mode=TwoWay}"></TextBlock>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="13 0 15 0"/>
</Style>
</GridView.ItemContainerStyle>
<interactivity:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="DragItemsCompleted">
<core:InvokeCommandAction Command="{Binding CanvasDragCompleted}"></core:InvokeCommandAction>
</core:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</GridView>
I'm new in XAML for Windows Phone 8.1 and have some troubles with
making a Stackpanel clickable
collapse Item, when clicked
My work so far looks like that:
And the Code to that (please correct me, if there are major flaws):
<Border CornerRadius="15" Background="#FF595656" Margin="0" Grid.ColumnSpan="2" Height="80">
<StackPanel Orientation="Horizontal">
<StackPanel Width="20" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0,0,0,0" VerticalAlignment="Center" Width="51">
<Image HorizontalAlignment="Left" Height="51" Margin="0,15,0,0" Width="51" Source="Assets/fish.png" Stretch="Fill" RenderTransformOrigin="2.307,0.881" VerticalAlignment="Center"/>
</StackPanel>
<StackPanel Width="10" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel HorizontalAlignment="Left" Height="80" Margin="0" VerticalAlignment="Top" Width="310">
<TextBlock HorizontalAlignment="Left" Height="25" Margin="0,20,0,0" TextWrapping="Wrap" Text="Entry 1" Width="310" VerticalAlignment="Top" FontSize="18" Foreground="Black" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="17" Margin="0" TextWrapping="Wrap" Text="Short description Entry 1" Width="310" VerticalAlignment="Top" Foreground="#FF0097FF"/>
</StackPanel>
</StackPanel>
</Border>
This code will later be wrapped inside a ListBox with Image, Entry 1 and the short description being bound:
<ListBox x:Name="ListBox1" Margin="0"
Width="400" Height="200" HorizontalAlignment="Left"
ItemsSource="{Binding}" Grid.Row="1" VerticalAlignment="Top" Grid.ColumnSpan="2" >
<ListBox.ItemTemplate>
<DataTemplate>
// the code above
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
So my question is:
How can I make a nice looking expansion/collapse of each Item in the ListBox, whenever I click on it?
Thank you very much in advance.
The real question is here is what do you want it to collapse to? There are too many possible ways to collapse some visual data item. Do you just want to change the height of the item or do you want some fancy animation that collapse some property?
If the height is what you're looking for it's pretty easy. Just attach an Tap Event on that Border of yours. On a sidenote, you probably want to edit the ItemContainerStyle to have <Setter Property="HorizontalContentAlignment" Value="Stretch"/> so the Listbox will stretch across the screen, otherwise imho it's un-useable.
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Red" BorderThickness="0,1" Tap="Border_Tap">
<StackPanel>
<!--- rest of template --->
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
Then calculate the Minimum height you want to show (make sure it's actually useable, meaning... I can Tap on it again to show the whole thing without using a Mag Glass).
private void Border_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
int minHeight = 40; // change to whatever you want
Border b = sender as Border;
if (b.ActualHeight > minHeight)
{
b.Height = minHeight;
}
else
{
b.Height = double.NaN; // this will change the height back to Auto, showing everything
}
}
Code In Action
This is just a quick solution to your question. Some people on here would rather have you create a StoryBoard Animation on the Height Property of the Selected state in the VisualStateManager. If you reword or create a new question explicitly stating you want a VisualStateManager solution, I will provide you one as well. Good luck.
I have the following XAML code and the only element available in the C# code behind are the Grid and the FlipView. How can I make the ScrollViewer, Image or the Viewbox visibile in the code?
XAML:
<Grid x:Name="gridViewPages">
<FlipView x:Name="FlipView1" Loaded="FlipView1_Loaded" Style="{StaticResource FlipViewPreviewIndicator}" Tapped="FlipView1_Tapped">
<FlipView.ItemTemplate>
<DataTemplate>
<ScrollViewer x:Name="pagesScrollViewer" ZoomMode="Enabled"
HorizontalAlignment="Center"
VerticalAlignment="Center"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
MinZoomFactor="1.0"
MaxZoomFactor="3.0"
Margin="0"
Width="1500" DoubleTapped="PagesScrollViewer_DoubleTapped">
<Viewbox x:Name="pagesViewbox">
<Image Source="{Binding}"
Height="730"
x:Name="pageImage" Stretch="Uniform" Loaded="MainImage_Loaded"/>
</Viewbox>
</ScrollViewer>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
The flipview is customized and contains also a listview defined in which is not visible in the code too...:
<Page.Resources>
...
<ListView x:Name="pagesPreview" HorizontalAlignment="Center" Height="100" VerticalAlignment="Bottom" Width="Auto"
ItemsSource="{TemplateBinding ItemsSource}"
SelectedItem="{Binding SelectedItem, Mode=TwoWay, RelativeSource={RelativeSource Mode=TemplatedParent}}"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollMode="Enabled"
ScrollViewer.VerticalScrollMode="Disabled"
Background="AliceBlue"
Opacity="1"
SelectionChanged="pagesPreview_SelectionChanged"
Visibility="Visible">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding}" Stretch="UniformToFill"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
...
</Page.Resources>
See the basic concept of the flipview is to have multiple pages to have a flip effect. So whatever the Data template contains is repeated multiple times. So if you want the x:Name to come up then you wont have any success.
There are two ways As per my knowledge :
VisualTreeHelper -> for a better detail of it go through this link
Get elements from data template
you can manually iterate over the flipview elements and track down the children of the flipview. Try that in debug mode you'll get a fair idea of what comes after what. Just keep track of the element at which selected index position you want modified
Thanks.
I need to fix a list with elements that have different types. Each of the type has it's own datatype to represent the viewmodel for each type. The following code works for me, but for some reason the data inside gets truncated, to some value (looks like default). I need to remove this trancation.
Here is what I have. This code is in the control, that could be placed in a list as well (it could be doubled or tripled). But I Don't think it's relevant.
<ScrollViewer VerticalScrollBarVisibility="Visible">
<ListView DockPanel.Dock="Top" Name="testCaseResultListView"
ItemsSource="{Binding LogItems}"
ItemContainerStyleSelector="{StaticResource fixSideViewLogItemStyleSelector}"
SelectionMode="Single"
>
<ListView.View>
<GridView x:Name="gridView2">
<GridView.ColumnHeaderContainerStyle>
<Style TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</GridView.ColumnHeaderContainerStyle>
<GridViewColumn CellTemplateSelector="{StaticResource fixSideViewLogItemTemplateSelector}"/>
</GridView>
</ListView.View>
</ListView>
</ScrollViewer>
</DockPanel>
fixSideViewLogItemTemplateSelector and fixSideViewLogItemStyleSelector are the selectors, that return different datatypes or styles for each of the type in LogItems. The common datatype is a grid with two columns, but that also seems irrelevent - I tried to put a textbox there, and it still gets truncated.
I would like this column to be stretched to the whole gridView. When I set width, of the column, I see the column resizing, but I want it to occupy the whole space. This should be elastic - if I put one control in the window, it should occupy the whole window, and properly resize (with it's column) when the window is resized. If I put two controls, they should divide the space by halves, and still should be resized when the window is resized.
Any help, tips?
Upd
Here is an example of the template I'm using.
<DataTemplate x:Key="testCaseDataResultTemplate">
<!-- Test case results -->
<Grid Margin="50,0,0,0" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<!--Test case result property-->
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<!--Is retry / Name-->
<RowDefinition />
<!--Test case number-->
<RowDefinition />
<!--Low limit-->
<RowDefinition />
<!--High limit-->
<RowDefinition />
<!--Measured-->
<RowDefinition />
<!--State-->
<RowDefinition />
<!--Test time-->
<RowDefinition />
<!--Comment-->
</Grid.RowDefinitions>
<!--Is retry / Name-->
<Image Grid.Column="0" Grid.Row="0"
Source="..\Resources\retry16.png"
Stretch="None" HorizontalAlignment="Left"
Visibility="{Binding Path=IsRetry, Converter={StaticResource boolToVisibilityConverter}}" />
<TextBlock Text="fh fhgfhg fhfhfhgfhg fhgfhfhgfhgfhgfhgfhgfhgf hgfhgfhgfhgfhgfhg fhfhgfhgf hgfhgfhfhg fhfhgf rdederserswerv 2" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="0" TextWrapping="Wrap" MaxWidth="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}}"/>
<!--Test case number-->
<TextBlock Text="Number:" Grid.Column="0" Grid.Row="1" />
<TextBlock Text="{Binding Path=TestCaseNumber}" Grid.Column="1" Grid.Row="1" />
<!--Low limit-->
<TextBlock Text="Low limit:" Grid.Column="0" Grid.Row="2" />
<TextBlock Text="{Binding Path=TestCaseData.LimitData.LowLimit}" Grid.Column="1" Grid.Row="2" />
<!--High limit-->
<TextBlock Text="High limit: " Grid.Column="0" Grid.Row="3" />
<TextBlock Text="{Binding Path=TestCaseData.LimitData.HighLimit}" Grid.Column="1" Grid.Row="3" />
<!--Measured-->
<TextBlock Text="Measured" Grid.Column="0" Grid.Row="4" />
<TextBlock Text="{Binding Path=MeasuredValue, Converter={StaticResource valasaConverter}}" Grid.Column="1" Grid.Row="4" />
<!--State-->
<TextBlock Text="Passed: " Grid.Column="0" Grid.Row="5" />
<TextBlock Text="{Binding Path=Passed}" Grid.Column="1" Grid.Row="5" />
<!--Test time-->
<TextBlock Text="Test time: " Grid.Column="0" Grid.Row="6" />
<TextBlock Text="{Binding Path=TestTime, StringFormat={}{0:hh':'mm':'ss'.'ff}}" Grid.Column="1" Grid.Row="6" />
<!--Comment-->
<TextBlock Text="{Binding Path=ShortMessage}"
Grid.Column="0" Grid.Row="7" Grid.ColumnSpan="2"
Visibility="{Binding Path=HasComment, Converter={StaticResource boolToVisibilityColConverter}}"
VerticalAlignment="Stretch"
MaxWidth="400"
TextAlignment="Center">
<TextBlock.ToolTip>
<StackPanel>
<TextBlock Text="{Binding Path=FullMessage}"/>
</StackPanel>
</TextBlock.ToolTip>
</TextBlock>
</Grid>
</DataTemplate>
It's a bit messy, but it is very simple. It has two columns - the captions, and the values. These columns are nothing to do with truncation.
I have tried also this template:
<DataTemplate x:Key="testCaseDataResultTemplate">
<TextBlock Text="Long long text goes here...... ->" HorizontalAlignment="Stretch"/>
</DataTemplate>
The text was of course longer :) It was still truncating, so I blame the listView/GridView, but not the inner template.
I think that this issue maybe is that you need to set the ListView.HorizontalContentAlignment to Stretch. Also the item container style and the item template must have the HorizontalAlignment to Stretch and the Width property must be Auto. Hope this tips helps...
EDIT
Also I think the problem could be the width of the GridViewColumn, that fix the items width
to it's own width. If you are using a single column, maybe you can change the ListView to a ListBox or an ItemsControl, just an idea.
I don't know what your templates looks like but I see a problem like this, it normally lies with a TextBlock that isn't wrapping and/or that the TextBlock's width is longer than it's parent.
Cannot say that I solved the puzzle, but at least it works as I expected. I removed the whole definition with GridView and columns inside, and put ItemTemplateSelector directly in ListView.
So my ListView looks now like this:
<ListView DockPanel.Dock="Top" Name="testCaseResultListView"
ItemsSource="{Binding LogItems}"
ItemContainerStyleSelector="{StaticResource fixSideViewLogItemStyleSelector}"
SelectionMode="Single"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ItemTemplateSelector="{StaticResource fixSideViewLogItemTemplateSelector}">
That did it! Hope that will help to somebody as well.