Is there possibility to display two TextBlock on a Grid ?
I tried, but i see only my first TextBlock.
Here is my XAML code :
<ListBox x:Name="ListBoxTiers" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#FFDEDEDE" CornerRadius="10" Margin="10">
<StackPanel Orientation="Horizontal">
<Grid Height="89" Width="975">
<TextBlock x:Name="TxtBox_CodeTiers" TextWrapping="Wrap" Text="{Binding m_strCode}" Margin="12,23,479,30" />
<TextBlock x:Name="TxtBox_NomTiers" Margin="501,23,14,24" TextWrapping="Wrap" Text="{Binding m_strNom}"/>
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks a lot :)
Grid is the best UI container which supports orientation. You can modify your code in the below way.
<ListBox x:Name="ListBoxTiers" HorizontalAlignment="Left" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Border Background="#FFDEDEDE" CornerRadius="10" Margin="10">
<Grid Height="89" Width="975">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="TxtBox_CodeTiers" Grid.Column=0 TextWrapping="Wrap" Text="{Binding m_strCode}" />
<TextBlock x:Name="TxtBox_NomTiers" Grid.Column=1 TextWrapping="Wrap" Text="{Binding m_strNom}"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You should have to adjust the column column width as per your requirement.
Both of your texts are drawn at the same location.
You can either add Grid columns/Raws or remove the grid completly and stay with the stackPanel
You should go over Panels Overview
Related
I have a grid with two columns each with a width of 1* to be of equal widths. Inside the left-most column, I have a listview but for some reason I can't get the width to automatically stretch to the width of the grid column. I've tried all kinds of things like HorizontalContentAlignment="Stretch" and ScrollViewer.HorizontalScrollBarVisibility="Disabled" both of which were suggested as possible fixes to this issue... but they don't seem to address my issue. Here's my code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<ListView ItemsSource="{Binding Path= Loads}" Grid.Column="0" MinHeight="20" MaxHeight="100" HorizontalAlignment="Left" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Margin="6,-3,0,0" SelectedItem="{Binding Path= CurrentLoad}">
<ListView.ItemTemplate>
<DataTemplate DataType="local:Loads">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Button Width="26" Height="26">
<StackPanel>
<Image Source="{Binding Path=Icon}" Width="24" Height="24" Stretch="Fill"></Image>
</StackPanel>
</Button>
<TextBlock Text="{Binding Path=Name}" FontSize="9" Margin="3,6,3,3"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackPanel Margin="0,-2,6,0" Grid.Column="1"></StackPanel>
</Grid
<ListView HorizontalAlignment="Left"
Well, there's your problem.
I have 2 textblocks in a listbox datatemplate.
I want to display list of names in alphabetical order. The first textblock should show the first character of names only at the start of the string with that character and the second textblock should show the string.
Please check the below link
http://i.stack.imgur.com/4mdtu.png
It is like:
A Ana
Andrew
Andy
B Bane
Bob
C Chris
Christian
Catherine
I tried this:
XAML:
<ListBox Height="331" Name="lstBoxPlayers" MinHeight="200" MinWidth="150" Margin="0,0,0,20" SelectionChanged="lstBoxPlayers_SelectionChanged"
Tap="lstBoxPlayers_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="0,0,0,1" MinWidth="200" Margin="0,0,0,0" Grid.Column="0">
<Grid Background="White" MinWidth="200" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="Abrev" Text="{Binding Path=PlayerShortName[0]}" FontSize="30" Foreground="Black" Height="Auto" Width="26" TextAlignment="Center">
</TextBlock>
<TextBlock Grid.Column="1" Text="{Binding PlayerShortName}" Foreground="Black" FontSize="16" Height="29" MaxWidth="160" Margin="-25,0,0,0" TextAlignment="Center">
</TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
code behind:
lstBoxPlayers.ItemsSource = PlayerList; //List of string
You can use GroupBy to form Alphabetic groups and then bind the resultant Collection of groups to the ListBox..
The code behind would look like:
lstBoxPlayers.ItemsSource = PlayerList.GroupBy( p => p.PlayerShortName[ 0 ] );
And the Xaml in you Grid would look like:
<!--Key of the Group-->
<TextBlock x:Name="Abrev" Text="{Binding Path=Key}" FontSize="30" Foreground="Black" Height="Auto" Width="26" TextAlignment="Center" VerticalAlignment="Top"></TextBlock>
<!--Values of the Group-->
<ItemsControl Grid.Column="1" ItemsSource="{Binding}" Margin="-25,0,0,0" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Grid.Column="1" Text="{Binding PlayerShortName}" Foreground="Black" FontSize="16" Height="29" MaxWidth="160" TextAlignment="Center"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I created my own simple statusbarcontrol with 3 TextBlocks. Now I would like that the first Textblock takes as much space as it has available. That I don't seem to get done.. Now it only takes the space needed to display the text.
XAML:
<StatusBar Background="{StaticResource GradientBrush}">
<StatusBar.ItemsPanel>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</StatusBar.ItemsPanel>
<StatusBarItem HorizontalAlignment="Left"
HorizontalContentAlignment="Right">
<Border BorderThickness="1"
BorderBrush="Black"
Padding="5 0 5 0"
Background="White">
<TextBlock Text="{Binding Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Foreground="{Binding TextColorMessage}"
Background="White"
/>
</Border>
</StatusBarItem>
<Separator Grid.Column="1" />
<StatusBarItem Grid.Column="2"
HorizontalAlignment="Right">
<TextBlock Text="{Binding Path=DatabaseName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</StatusBarItem>
<Separator Grid.Column="3" />
<StatusBarItem Grid.Column="4"
HorizontalAlignment="Right">
<TextBlock Text="{Binding Path=ComputerName}" />
</StatusBarItem>
Well this is pretty straight forward:
you had set the StatusBarItem HorizontalAlignment="Left" when it should be "strech", same for the HorizontalContentAlignment.
Also would suggest setting margin=0 on the border.
this is what i did so it will work for me:
<StatusBarItem HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch">
<Border BorderThickness="1"
BorderBrush="Black"
Margin="0"
Padding="5 0 5 0"
Background="White">
<TextBlock Text="{Binding Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Foreground="{Binding TextColorMessage}"
Background="White"/>
</Border>
</StatusBarItem>
if this is helpful please mark as answer
Try setting the StatusBarItem's HorizontalAlignment and HorizontalContentAlignment to Stretch.
Set the StatusBarItem's HorizontalContentAlignment to Stretch and the TextBlock's TextAlignment property to Right. (This second setting is only needed for the first StatusBarItem as it seems that you try to align the text to the right in it.)
StatusBar has only one HorizontalAlignment=Right item to effect, so you can get only the last item in wanted place. You can set statusBar's FlowDirection="RightToLeft" and add item in reversed order. Details: right placed items needn't StatusBarItem surrounded, but the left one need to be streched. Following code:
<StatusBar VerticalAlignment="Bottom" FlowDirection="RightToLeft"><!--flow right to left cause items right aligned-->
<!--make item's flow back left to right, avoid display disorder-->
<TextBlock x:Name="textBlock_status_R1" Text="111.147.168.20" Grid.Column="2" Margin="10,0" FlowDirection="LeftToRight"/>
<Separator/>
<TextBlock x:Name="textBlock_status_R2" Text="Working" Margin="10,0" FlowDirection="LeftToRight"/>
<Separator/>
<!--To fill rest space，need StatusBarItem packing and default HorizontalAlignment="Stretch"-->
<StatusBarItem FlowDirection="LeftToRight">
<TextBlock x:Name="textBlock_status_L1" Text="Information here."/>
</StatusBarItem>
</StatusBar>
I created user control with the textblock. But it will not wrap. This user control servers as a listboxitem.
<Grid x:Name="MainGrid" Height="Auto" Width="Auto">
<StackPanel Orientation="Horizontal">
<Image Height="50" Width="100" Stretch="Uniform" Name="image1" Source="{Binding Path=VideoImageUrl}" Margin="12,12,13,84" MouseLeftButtonDown="image1_MouseLeftButtonDown" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" />
<StackPanel Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Height="Auto" HorizontalAlignment="Left" Name="titleTextBox"
Text="{Binding Path=Title, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" FontSize="14" FontWeight="SemiBold" />
<StackPanel Orientation="Vertical" x:Name="StackPanelDetails">
<TextBlock Height="Auto" HorizontalAlignment="Left" Name="desciptionTextBox"
TextWrapping="Wrap"
Text="{Binding Path=Desciption, Mode=OneWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" />
<Line />
<ItemsControl x:Name="CustomItemsSource" ItemsSource="{Binding Path=LinksList}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink NavigateUri="{Binding Path=TopicUrl}" RequestNavigate="Hyperlink_RequestNavigate" >
<TextBlock Text="{Binding Path=TopicName}" />
</Hyperlink>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
A ListBox's default template does not automatically limit the width of its items, but instead uses a ScrollViewer, which shows a horizontal scrollbar when an item is wider than the ListBox.
You can remove the ScrollViewer by replacing the ListBox's Template:
<ListBox ...>
<ListBox.Template>
<ControlTemplate>
<StackPanel IsItemsHost="True"/>
</ControlTemplate>
</ListBox.Template>
...
</ListBox>
Another important thing to note is that a StackPanel in the top-level Grid won't properly resize the contained elements. In the following simplified example the text in the TextBlock is not wrapped because the containing StackPanel simply does not resize it as you expect:
<Grid>
<StackPanel Orientation="Horizontal">
<Image ... />
<Text TextWrapping="Wrap" Text=... />
</StackPanel>
</Grid>
This way it works as you expect:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image ... />
<TextBlock Grid.Column="1" TextWrapping="Wrap" Text=... />
</Grid>
I have a data template formatting items in a ListBox
<DataTemplate x:Key="ChildViewModelTemplate">
<Border BorderBrush="#FFDC1C1C" BorderThickness="1" >
<Grid>
<TextBlock Text="{Binding Path=DisplayName}"></TextBlock>
<Image Height="Auto" Margin="0,0,2,0" VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="31" Source="pack://siteoforigin:,,,/rocket.ico"/>
</Grid>
</Border>
</DataTemplate>
This puts a border around each item extending to the length of the text string bound in the TextBlock binding.
Is there a simple way to have all elements the same width, where the width is equal to the longest element? For bonus points I'm wondering if there is a way to do it for the longest visible element and/or longest element regardless if it's visible.
Thanks
You might want to have a look at the Grid.IsSharedSizeScope and SharedSizeGroup Properties.
Here's a tutorial for it:
http://blogs.interknowlogy.com/johnbowen/archive/2007/08/27/21132.aspx
Following up on Botz3000's answer. SharedSizeGroup is the way to go here. This will do it
<ListBox ...
Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Col1"/>
</Grid.ColumnDefinitions>
<Border BorderBrush="#FFDC1C1C" BorderThickness="1" >
<Grid>
<TextBlock Text="{Binding Path=DisplayName}"></TextBlock>
<Image Height="Auto" Margin="0,0,2,0" VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="31" Source="C:\C1.png"/>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>