Im trying to have a textblock inside a scrollviewer, and if the text exceds the scrollviewer width, have it trimmed.
The text should display the "..." indicating thre is more text, so that the user can scroll to see the rest of the text.
right now i have something like this, but the text trimming inst working.
<ScrollViewer Grid.Row="1" HorizontalScrollMode="Enabled" HorizontalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" VerticalScrollBarVisibility="Hidden">
<TextBlock Margin="0,5,0,0" Text="{Binding Item.Name}" FontFamily="Segoe UI Semibold" Foreground="White" FontSize="20" FontWeight="SemiBold" VerticalAlignment="Center" TextTrimming="WordEllipsis"/>
</ScrollViewer>
Related
This is my XAML
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,0,0,0">
<TextBlock x:Name="PageTitle"
RelativePanel.AlignTopWithPanel="True"
Style="{StaticResource WindowTitle}">This is my page title</TextBlock>
<TextBlock x:Name="ActivityLabel"
RelativePanel.Below="PageTitle"
Style="{StaticResource CaptionTitle}">Activity</TextBlock>
<ComboBox x:Name="ActivityOptions"
RelativePanel.RightOf="ActivityLabel"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignHorizontalCenterWith="ActivityLabel"
ItemsSource="{Binding Path=SupportedActivityTypes}">
</ComboBox>
</RelativePanel>
And this is my output
What I want to achieve is that the title is on top of the page, multiple lines below the title. Each line has a caption, right to the caption is combo box, textbox and so on, but the right side should stretch to the right border of the panel.
Obviously my code does not work, the combo does not even central align with my caption text as I specified in markup. And how to make the left side of combo to touch the caption text and right side to the border of the panel?
I figured it out, I need following XAML
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,0,0,0">
<TextBlock x:Name="PageTitle"
Margin="0,0,0,20"
RelativePanel.AlignTopWithPanel="True"
Style="{StaticResource WindowTitle}">This is page title</TextBlock>
<TextBlock x:Name="ActivityLabel"
RelativePanel.Below="PageTitle"
Style="{StaticResource CaptionTitle}">Activity</TextBlock>
<ComboBox x:Name="ActivityOptions"
Margin="10,0,0,0"
HorizontalAlignment="Stretch"
RelativePanel.RightOf="ActivityLabel"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignVerticalCenterWith="ActivityLabel"
ItemsSource="{Binding Path=SupportedActivityTypes}">
</ComboBox>
</RelativePanel>
The combo box is on the same line of caption label ("Activity") and meanwhile the width stretches to relative panel size.
how to make the left side of combo to touch the caption text and right side to the border of the panel?
You need to set RelativePanel.RightOf="PageTitle" and RelativePanel.AlignVerticalCenterWith="PageTitle".
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="10,0,0,0">
<TextBlock x:Name="PageTitle"
RelativePanel.AlignTopWithPanel="True"
Style="{StaticResource TitleTextBlockStyle}" VerticalAlignment="Center" FontSize="35">This is my page title</TextBlock>
<TextBlock x:Name="ActivityLabel"
RelativePanel.Below="PageTitle"
Style="{StaticResource CaptionTextBlockStyle}">Activity</TextBlock>
<ComboBox x:Name="ActivityOptions"
RelativePanel.RightOf="PageTitle"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignVerticalCenterWith="PageTitle"
ItemsSource="{Binding Path=SupportedActivityTypes}">
</ComboBox>
</RelativePanel>
wrapped text will keep center not left
Is there any way to setup text wrapping so that all of the text in the text block is center-aligned?
<ContentPresenter x:Name="CPMessage"
Content="{Binding BodyContent, ElementName=control, Mode=OneWay}"
Margin="32,0,32,36"
TextWrapping="WrapWholeWords"
HorizontalAlignment="Center"
VerticalAlignment="Top"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
FontSize="16" />
Fixed it pretty easily by myself with the below code
<TextBlock Text="{Binding BodyContent, ElementName=control, Mode=OneWay}"
TextWrapping="WrapWholeWords"
TextAlignment="Center" />
Add the code inside of COntentPresenter
I'm new at developing apps for Windows 8, and its my first encounter with XAML.
I'm trying to build a GridView that will show a grid of 150x150 tiles. The GridView's XAML looks like this:
<GridView Grid.Row="2" Grid.Column="0"
x:Name="ClocksContainer"
VerticalAlignment="Top"
Height="190"
Margin="80,20,80,0"
HorizontalContentAlignment="Left">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="150" Margin="75,0,940,0" Width="150" Background="#FF971485">
<TextBlock Text="12:23pm" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="130" FontSize="32" Foreground="White"/>
<TextBlock Text="23 February, 2014" HorizontalAlignment="Left" Margin="10,48,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-0.444,0.385" Foreground="#B2FFFFFF"/>
<TextBlock Text="29° / 20°" HorizontalAlignment="Left" Margin="102,128,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#B2FFFFFF" TextAlignment="Right" FontSize="10"/>
<TextBlock Text="Party Cloudy" HorizontalAlignment="Left" Margin="10,128,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#B2FFFFFF" FontSize="10"/>
<Border BorderBrush="{x:Null}" HorizontalAlignment="Left" Height="45" Margin="10,78,0,0" VerticalAlignment="Top" Width="130">
<TextBlock Text="Chennai, India" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Bottom" Foreground="White" Width="130" FontSize="14"/>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.Items>
<x:String>test</x:String>
<x:String>test</x:String>
</GridView.Items>
</GridView>
However, in the output I'm finding that my grid items are stretching to the width of the grid itself!
To illustrate, here are two cropped screenshots of the rendered GridView.
The first screenshot shows how a grid item expands to the width of the GridView. (I've added the red outline myself in photoshop).
The second screenshot is of the gridview scrolled ahead to reveal teh second item. The red outline on the first item has been replicated via photoshop. The second item's background is a darker colour because it is mouse-over-ed.
My Question: How do I make the grid items not expand to the width? The intended output is this:
Remove Margin="75,0,940,0" from GridView's ItemTemplate
I have a ListBox with this template in it.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<StackPanel Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000" Width="460" MinHeight="76">
<StackPanel Margin="4,4,-4,-153">
<TextBlock Text="{Binding }" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
<TextBlock " Text="{Binding Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
</StackPanel>
</Border>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Yet I have to force set a Width and Height on the Border otherwise it makes like Width and Height of "2".
It is like it does not understand I have 2 TextBlock inside it and won't expand to fill both of them.
This leaves me with having to put a fixed height and width in what I don't like as if the text is too big it gets cutoff.
You can toss out your StackPanel's because you don't need them, they're also what's keeping your wrapping from working, you need a panel like a Grid for that. The negative Margin's also isn't something you'd normally see in a DataTemplate for a ListBox so I'd guess you have some other funky layout stuff going on from that sort of practice elsewhere up the tree.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<Grid Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000"/>
<TextBlock TextWrapping="Wrap"
HorizontalAlignment="Center" Margin="4,4,-4,-153">
<Run Text="{Binding }"/><LineBreak/>
<Run Text="{Binding Mode=OneWay}"/>
</TextBlock>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
So unless I'm missing something somewhere this should fix you up as the Grid will handle the sizes of its children for you and consume the space necessary in its parent. However if there's something else in your structure pushing stuff around and won't let it consume that space it should invoke your Wrapping.
Hope this helps :)
I have a TextBox inside a ScrollViewer, as shown below
<ScrollViewer Name="scrollViewer1" Height="480" HorizontalAlignment="Left" Margin="0,480,8,82" VerticalAlignment="Bottom" Width="480" VerticalScrollBarVisibility="Auto">
<TextBox Name="box1" TextWrapping="Wrap" FontSize="32" IsReadOnly="True" TextAlignment="Center"/>
</ScrollViewer>
I don't want VerticalAlignment="Bottom" as I want to scroll to a specific place in the TextBox and for it to stay there without automatically scrolling to the bottom again.
Thanks