code:
<code>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Key1:" FontSize="20" Foreground="#73000000" TextWrapping="Wrap"/>
<Grid><TextBlock Text="Small Value1" FontSize="20" TextWrapping="Wrap" />
</Grid>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Key2:" FontSize="20" Foreground="#73000000" TextWrapping="Wrap"/>
<Grid>
<TextBlock Text="Long Long Long Long Long LongLongLong Long Long LongValue2" FontSize="20" TextWrapping="Wrap" />
</Grid>
</StackPanel>
</code>
Image screen shot:
I need to make the transfer of values to a new line if it is longer than the screen.
Try using Wrap whole word attribute
<TextBlock TextWrapping="WrapWholeWords">
<TextBlock x:Name="TextBlock1" TextWrapping="Wrap" FontSize="20">
<Run Foreground="#73000000">Key:</Run>
<Run Text="{Binding Tag, ElementName=TextBlock1}"/>
</TextBlock>
TextBlock1.Tag = "Long Long Long Long Long Long Long Long LongValue";
Related
I've got the problem, that I create an App, that will run on Windows Phone 8.1 and Windows 10 Mobile. This App is a non-UWP Windows Store App.
The problem I have is, that I have a list of a custom control that one has another List, that is not expanded (=collapsed). That looks like this:
The red rectangles are the ContentPresenter items of the first ItemControl and the green rectangles are the ContentPresenter items of the ItemControl in the first lists items, that is not visible on startup. It will be visible after the click on the expand-button. Both ItemControls have a DataTemplate configured to present what you see in the screenshot. (XAML code below)
The main problem I have is, that if I change the Pivot to the Pivot you see at the screenshot above, there is a freeze of the app for several seconds. It depends on the device how long this freeze is. In the W10M-Emulator on my PC I don't recognize a freeze but on a Lumia 620 with WP8.1 I have a freeze of 8.5 seconds.
In the profiler of Visual Studio it looks like this (I selected the range that is the problem I am talking about):
What I am wondering about is the large orange line with "Layout". If I expand it to the "big players", there is 60-70ms for each not visible item in the profiler.
I am asking myself why this is the case, even if the items are not visible and are in the VirtualizingStackPanel. The Number of Items of the ItemSourcein this example is 3 for the first ItemControl (red boxes) and 17, 59 and 1 for the second ItemControls that are only visible of the first item is expanded.
What I am also wondering about is, that regarding the timeline, all of the Items are processed at the same time because their baseline is for all items the same. But if I scroll down the profiler timeline details, I see another Event called "Parsing" for each item. That one is not processed in parallel for each item but serial. And the parsing of the last item fits to the end of the layout-event. This parsing events look like this:
What is the reason why the parsing takes so long time? I don't think that the controls are very complex etc. and there are no code behind procedures except some string formattings.
Finally here is the XAML code:
My PivotItem on the "MainPage" of the App:
<PivotItem
Header="Echtzeit"
Margin="10,-20,10,0"
>
<Grid>
<ScrollViewer
VerticalScrollBarVisibility="Visible"
>
<ItemsControl
ItemsSource="{Binding RealtimeDepartures, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
HorizontalAlignment="Stretch"
Margin="0"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<controls:RealtimeStation
StationName="{Binding StationName, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Departures="{Binding DepartureList, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
FontSize="{Binding DataContext.ClientFontSize, ElementName=MainPg, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</PivotItem>
The RealtimeStation Control XAML:
<UserControl
...
>
<UserControl.Resources>
<dec:BoolToVisibilityConverter x:Key="BoolToVisibilityConv"/>
</UserControl.Resources>
<Grid>
<AppBarButton
HorizontalAlignment="Left"
VerticalAlignment="Top"
Grid.Column="0"
Name="btnExpand"
Icon="{Binding ExpandButtonIcon, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Click="btnExpand_Click"
IsEnabled="{Binding IsExpandButtonEnabled, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
IsCompact="True"
Margin="0,-8,-2,-4"
/>
<StackPanel
Orientation="Vertical"
Margin="48,12,0,0"
>
<TextBlock
Text="{Binding StationName, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
VerticalAlignment="Center"
FontSize="24"
/>
<TextBlock
Text="Derzeit stehen keine Abfahrten an"
FontStyle="Italic"
Visibility="{Binding ShowNoDepartures, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
FontSize="{Binding FontSize, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
<TextBlock
Text="Zugausfälle vorhanden!"
Foreground="Red"
FontWeight="Bold"
Visibility="{Binding ShowTrainCanceled, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
FontSize="{Binding FontSize, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
<ItemsControl
ItemsSource="{Binding DepartureList, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
ScrollViewer.VerticalScrollBarVisibility="Visible"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Margin="-48,0,0,0"
Visibility="{Binding IsExpanded, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, Converter={StaticResource BoolToVisibilityConv}}"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentPresenter>
<controls:RealtimeDeparture
DepartureDetails="{Binding}"
FontSize="{Binding FontSize, ElementName=main, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
/>
</ContentPresenter>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
</UserControl>
And finally the RealtimeDeparture Control:
<UserControl
...
>
<Grid>
<control:DisruptionIcon
Height="24"
Width="50"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Icon="{Binding TrainIcon, UpdateSourceTrigger=PropertyChanged, Mode=OneWay}"
Margin="3"
/>
<StackPanel
Orientation="Vertical"
Margin="56,9,0,0"
>
<StackPanel
Orientation="Horizontal"
Margin="3,0"
VerticalAlignment="Center"
>
<TextBlock
Text="{Binding DelayTimeText, ElementName=main, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Foreground="{Binding DelayColor, ElementName=main, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
/>
<TextBlock
Text="{Binding DepartureDetailsText, ElementName=main, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
Margin="3,0"
/>
</StackPanel>
<TextBlock
Text="{Binding InformationText, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, ElementName=main}"
Visibility="{Binding IsInformationVisible, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, ElementName=main}"
Margin="3"
FontStyle="Italic"
TextWrapping="Wrap"
/>
<TextBlock
Text="Zug fällt aus!"
Foreground="Red"
FontWeight="Bold"
Visibility="{Binding IsCanceledVisible, UpdateSourceTrigger=PropertyChanged, Mode=OneWay, ElementName=main}"
Margin="3"
/>
</StackPanel>
</Grid>
</UserControl>
Does anybody has an idea how to speed up this parsing? What is the reason why it is so slow? Do I have a design issue that is disabling the virtualization-functionality of the VirtualizedStackPanel? I already tried a lot but didn't find the reason why it is so slow.
I don't think virtualization is turned on.
Try setting the CanContentScroll property to true on your ScrollViewer:
<ScrollViewer
CanContentScroll="true"
VerticalScrollBarVisibility="Visible"
>
The other option can be using e.g. ListBox which supports virtualization on its own (as far as I know it is enough to set the ItemsPanelTemplate to VirtualizingStackPanel)
Question: Why won't my databound text render as text
When I am using databound TextBlock controls, the output in my Windows App shows as Squares, like it can't figure out what to render the text as. If I put actual text in the Text property, it displays normally.
<RelativePanel x:Name="BasicInfo" RightOf="ProfilePicture">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="FirstName" Text="{Binding FirstName}"
TextWrapping="NoWrap" Margin="10,0,0,0"/>
<TextBlock x:Name="LastName" Text="{Binding LastName}"
TextWrapping="NoWrap" Padding="3,0,0,0"/>
</StackPanel>
<TextBlock x:Name="EmailAddress" HorizontalAlignment="Left" Text="{Binding EmailAddress}"
TextWrapping="NoWrap" Margin="10,2,0,0" />
<TextBlock x:Name="PhoneNumber" HorizontalAlignment="Left" Text="{Binding PhoneNumber}"
TextWrapping="NoWrap" Margin="10,2,0,0" />
</StackPanel>
</RelativePanel>
<RelativePanel x:Name="AddressInfo" Below="BasicInfo" RightOf="ProfilePicture" Margin="0, 20, 0, 0">
<StackPanel Orientation="Vertical">
<TextBlock x:Name="Address1" HorizontalAlignment="Left" Text="{Binding Address1}"
TextWrapping="NoWrap" Margin="10,0,0,0"/>
<TextBlock x:Name="Address2" HorizontalAlignment="Left" Text="{Binding Address2}"
TextWrapping="NoWrap" TextAlignment="Left" Margin="10,0,0,0"/>
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="City" HorizontalAlignment="Left" Text="{Binding City}"
TextWrapping="NoWrap" Margin="10,0,0,0"/>
<TextBlock>,</TextBlock>
<TextBlock x:Name="State" Text="{Binding State}"
TextWrapping="NoWrap" Margin="3,0,0,0"/>
</StackPanel>
<TextBlock x:Name="ZipCode" HorizontalAlignment="Left" Text="{Binding ZipCode}"
TextWrapping="NoWrap" Margin="10,0,0,0"/>
</StackPanel>
</RelativePanel>
Here is what the output looks like:
we can try in xaml.cs page
Dispatcher.BeginInvoke(delegate
{
listboxname.ItemsSource = Resultclassname;
});
I'm trying to create a ListViewItemTemplate and my template needs to have two textblocks side by side. The one on the left is a message textblock and should stay left and the one on the right is a date textblock. That textblock needs to stretch to the end of the ItemTemplate and needs to fit all the text. I'm trying to achieve this:
But this is what I get:
The XAML code for this is:
<DataTemplate x:Key="ItemTemplate">
<Grid Height="84">
<StackPanel Holding="ListViewItem_Holding">
<TextBlock Text="{Binding Title}" FontFamily="Segoe WP" FontSize="21" />
<StackPanel Margin="0,0,-3,0" Orientation="Horizontal">
<TextBlock Text="{Binding Post}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-1,0" Height="26" />
<TextBlock Text="{Binding Modified}" FontFamily="Segoe WP SemiLight" FontSize="18" Margin="0,0,-3,0" SelectionChanged="TextBlock_SelectionChanged" />
</StackPanel>
<TextBlock Text="{Binding ID}" FontFamily="Segoe WP SemiLight" FontSize="18" Visibility="Collapsed" />
</StackPanel>
</Grid>
</DataTemplate>
How can I fix this? I need it so that it stretches properly and at the same time fits all the text regardless of the orientation.
I would personally use a Grid as it is far more flexible than StackPanel and deals with different screen sizes much better. something like below
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="Cant send: message" FontFamily="Segoe WP SemiLight"
FontSize="18" Margin="0,0,-1,0"
TextWrapping="Wrap"/>
<TextBlock Text="1:14a" Grid.Column="1" FontFamily="Segoe WP SemiLight"
TextWrapping="Wrap" FontSize="18"
HorizontalAlignment="Right"
SelectionChanged="TextBlock_SelectionChanged"
Margin="0,-15,0,0"/>
</Grid>
Note 2 columns are defined with equal widths. You can adjust this to your needs.
Also both TextBlocks have
TextWrapping="Wrap"
which means your text will go to available space (column width) then wrap to the next line if space is available.
The second TextBlock is aligned to the right so adjust margins as appropriate.
HorizontalAlignment="Right"
You can make this with Grid.RowDefinitions and Grid.ColumnDefinitions.
Base on your picture you have data on two columns and one line.
So you can size your screen on two columns and one line. You don't need to use stackpanel to achieve this.
<Grid Height="84">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="User" TextWrapping="Wrap" FontFamily="Segoe WP" FontSize="21" Grid.Column="0"/>
<TextBlock Text="1:41a" FontFamily="Segoe WP SemiLight" FontSize="18" Grid.Column="1" HorizontalAlignment="Right"/>
</Grid>
I just implemented a GridView with groups feature. I have a list of TVshows's episodes which are grouped by diffusion date.
When I have more than 3 episodes by date, I want to have my items wrapped and go next to the group title, at this time, the next items are going outside of the screen, and it not what I wanted.
As you can see, there is other episodes under the dupplicated one for each day, I want them to go next to the others, not under.
Here is my XAML code, thanks :)
<GridView Margin="70,0,0,40" ItemsSource="{Binding Source={StaticResource cvsActivities}}">
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
<GridView.ItemContainerTransitions>
<TransitionCollection>
<EntranceThemeTransition IsStaggeringEnabled="True" />
<RepositionThemeTransition />
<AddDeleteThemeTransition />
</TransitionCollection>
</GridView.ItemContainerTransitions>
<GridView.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Vertical">
<Grid Name="grid_image">
<Image Width="280" Height="200" VerticalAlignment="Center" Stretch="UniformToFill" Source="Assets/no_image.png" />
<Image Width="280" Height="200" VerticalAlignment="Center" Stretch="UniformToFill" Source="{Binding saison.serie.poster}" />
</Grid>
<Image Source="Assets/Ban-1hh.png" Width="280" Height="59" Margin="0,-19,0,0"/>
<Grid Margin="0,-40,0,0" Height="40">
<StackPanel HorizontalAlignment="Left" Orientation="Vertical" VerticalAlignment="Center" Margin="0,-7,0,0">
<TextBlock HorizontalAlignment="Left" Margin="5,0,0,0" Width="190" TextTrimming="WordEllipsis" Foreground="White" FontSize="20" Text="{Binding saison.serie.nom}" />
<TextBlock HorizontalAlignment="Left" Margin="5,-5,0,0" Width="190" TextTrimming="WordEllipsis" Foreground="White" FontSize="13" Text="{Binding date}" />
</StackPanel>
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Right" Orientation="Vertical" Margin="0,-5,5,0">
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft">
<TextBlock Foreground="#f0ec45" FontSize="14" Text="{Binding saison.number}" />
<TextBlock Foreground="#f0ec45" FontSize="14" Margin="5,0,0,0" Text="Saison " />
</StackPanel>
<StackPanel Orientation="Horizontal" FlowDirection="RightToLeft" Margin="0,-5,0,0">
<TextBlock Foreground="#f0ec45" FontSize="14" Text="{Binding ep_number}" />
<TextBlock Foreground="#f0ec45" FontSize="14" Margin="5,0,0,0" Text="Episode " />
</StackPanel>
</StackPanel>
</Grid>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="LightGray" >
<TextBlock Text="{Binding Key, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:dddd dd MMM yy}'}" Foreground="Black" Margin="10"
Style="{StaticResource PageSubheaderTextStyle}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
Add a ItemsPanelTemplate (if you take a look at the default GridApp and the GroupedItemsPage.xaml, you'll see this is how they do it).
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
If you want the 3rd element in a column to leak over the bottom, then you can set a negative bottom margin on the GridView itself.
You virtually erased the GridView control template, so no wonder it doesn't work. Remove the following part and things might get back to normal:
<GridView.Template>
<ControlTemplate>
<ItemsPresenter />
</ControlTemplate>
</GridView.Template>
If there is something you want changed in the default template - change that specific thing. The default template has a horizontal ScrollViewer which limits vertical space use by the WrapGrid that is used for its ItemsPanelTemplate and allows items to wrap to next column, while also allowing to scroll horizontally to see all items.
I would like to present a summary list side by side, so I created a small ItemsControl to achieve that goal:
<ItemsControl x:Name="GRS">
<ItemsControl.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal" Margin="10">
<StackPanel Orientation="Vertical">
<TextBlock Text="Round" FontSize="20" />
<TextBlock Text="Food" FontSize="20" />
<TextBlock Text="Harvest" FontSize="20" />
<TextBlock Text="State" FontSize="20" />
<TextBlock Text="Private" FontSize="20" />
<TextBlock Text="Value" FontSize="20" />
<TextBlock Text="Type" FontSize="20" />
</StackPanel>
<ItemsPresenter />
</StackPanel>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Margin="10" BorderBrush="Black" BorderThickness="2">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Path=RoundNumber}" FontSize="20" />
<TextBlock Text="{Binding Path=PlayerAndModusSetting.FoodCost}" FontSize="20" />
<CheckBox IsChecked="{Binding Path=IsHarvest}" FontSize="20" />
<TextBlock Text="{Binding Path=PlayerAndModusSetting.StateBuildProject}" FontSize="20" />
<TextBlock Text="{Binding Path=PlayerAndModusSetting.PrivateBuildProject}" FontSize="20" />
<TextBlock Text="{Binding Path=Value}" FontSize="20" />
<TextBlock Text="{Binding Path=ShipType}" FontSize="20" />
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
When I set the ItemsSource & run, the result is the lists orientated vertically instead of horizontally.
As you can see, the first one is side by sidem but after that, it continues downwards, and I can't tell why.
Thanks.
The parent control of your Item Template is a StackPanel - each item is a StackPanel, contained within a StackPanel - you need to change the container around your ItemsPresenter to WrapPanel if you want it to tile horizontally.
Example:
</StackPanel>
<WrapPanel>
<ItemsPresenter />
</WrapPanel>
</StackPanel>