So, i have the following xaml at the moment-
<Window.Resources>
<DataTemplate x:Key="MailTemplate">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Date}" Width="150"/>
<TextBlock Text="{Binding Path=Subject}" Width="300"/>
<TextBlock Text="{Binding Path=From.DisplayName}" Width="125"/>
</StackPanel>
</DataTemplate>
</Window.Resources>
It's a template of a ListBox item.
The actual details do not really matter, its just about the Width attribute.
Is there a way to access the window's size in order to set the width? I don't want the Width to be constant, i want the TextBlocks to be able to change sizes if you stretch the window.
You can do that by not setting any fixed widths on the TextBlock elements, and use a Grid with star-sizing instead of a StackPanel as container. For example like this:
<DataTemplate x:Key="MailTemplate">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150*" />
<ColumnDefinition Width="300*" />
<ColumnDefinition Width="125*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=Date}" />
<TextBlock Grid.Column="1" Text="{Binding Path=Subject}" />
<TextBlock Grid.Column="2" Text="{Binding Path=From.DisplayName}" />
</Grid>
</DataTemplate>
Related
Each list item must be
TextBlock 1 fill first row with 100% width;
TextBlock 2,3,4 must fill 33% each on separate row;
Why TextBlock 2,3,4 not strech?
<ListView.ItemTemplate><DataTemplate><StackPanel>
<TextBlock Text="{Binding Name}" />
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock TextAlignment="Right" Grid.Row="0" Grid.Column="0"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Text="{Binding Rest}" FontSize="28"/>
<TextBlock TextAlignment="Right" Grid.Row="0" Grid.Column="1"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Text="{Binding Currency.Name}" FontSize="25"/>
<TextBlock TextAlignment="Right" Grid.Row="0" Grid.Column="2"
HorizontalAlignment="Stretch" VerticalAlignment="Center"
Text="{Binding FullRest}" FontSize="22"/>
</Grid>
</StackPanel></DataTemplate></ListView.ItemTemplate>
P.S.
How i can add 1...x rows in list view in design time?
Use ListView.ItemContainerStyle
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
This code (with normal values, because I don't have the underlying data structure) works fine for me.
Different rows can have different widths however. That can be fixed by setting the Width of the StackPanel to the ActualWidth - margins of the listview.
You can find some info about how to add mock data, for usage in the designer, here: How to get mock data into listview during design time and real data at run time in WPF
I used a ListBox to bind my data in similar way.
You will need to give stackpanel specific width
And you will have to set textwrapping property to 'no wrap'
<ListBox x:Name="listbox" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Width="480">
<TextBlock Text="{Binding main}" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock TextWrapping="NoWrap" Text="{Binding one}"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding two}" Grid.Column="1"/>
<TextBlock TextWrapping="NoWrap" Text="{Binding thr}" Grid.Column="2"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This Works perfectly for me!
I have a problem scrolling vertically within a data bound pivot page (WP 7.1).
I have tried the different solutions posted here and on MSDN, but none of them seem to work for me..
I have a list
of News objects in an ObservableCollection that I am displaying in a pivot page. So far so good...
I want to be able to scroll the main text of the news item, but have the menu and headline stationary on the page.
I have tried making a grid and surrounding the scrollable content by a Listbox and now a ScrollViewer, but I am not able to scroll on the page.. When I try scrolling, I can scroll a couple of lines of text, and then the text reverts to the original position. Very frustrating!!!
The code I have tried is this:
<!--Pivot Control-->
<controls:Pivot x:Name="PivotNews"
Grid.Row="2"
ItemsSource="{Binding NewsCollection}" >
<controls:Pivot.HeaderTemplate>
<DataTemplate>
<!--<TextBlock Text="Seneste nyheder" />-->
</DataTemplate>
</controls:Pivot.HeaderTemplate>
<controls:Pivot.ItemTemplate>
<DataTemplate>
<StackPanel>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<!--<RowDefinition Height="*" />-->
</Grid.RowDefinitions>
<Grid x:Name="HeaderLine"
Grid.Row ="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Source="{Binding ImageUri}"
Grid.Column="0"
Height="150"/>
<TextBlock Text="{Binding Header}"
FontWeight="ExtraBold"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
TextWrapping="Wrap"
Grid.Column="1"
Margin="10,0,0,10"/>
</Grid>
<ScrollViewer x:Name="ScrollViewerNews" Grid.Row="1">
<StackPanel>
<TextBlock Text="{Binding SubHeader}"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontWeight="Bold"
TextWrapping="Wrap" />
<TextBlock Text="{Binding MainText}"
TextWrapping="Wrap" />
</StackPanel>
</ScrollViewer>
</Grid>
</StackPanel>
</DataTemplate>
</controls:Pivot.ItemTemplate>
</controls:Pivot>
Just remove first StackPanel in your ItemTemplate.
When you use StackPanel, it has it's own height, that does not depend on Page height, and row height value "*" tries to fit in the available space, that is in this case bigger, than the pages height.
I need to use an ItemTemplate that will make the items look as similar as possible to the Messaging Hub on Windows Phone. Currently, I have this code as my DataTemplate, but I can't get the TextBlock to align to the right side of the horizontal StackPanel.
<StackPanel Orientation="Right">
<StackPanel>
<TextBlock Text="{Binding IP}"/>
<TextBlock Text="{Binding LastMessage}"/>
</StackPanel>
<TextBlock HorizontalAlignment="Right" Text="{Binding Time}"/>
</StackPanel>
An image of the Messaging Hub on Windows Phone:
you can use Grid for this, see example:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.7*"/>
<ColumnDefinition Width="0.3*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" HorizontalAlignment="Left">
<TextBlock Text="{Binding IP}"/>
<TextBlock Text="{Binding LastMessage}"/>
</StackPanel>
<TextBlock Grid.Column="1" HorizontalAlignment="Right" Text="{Binding Time}"/>
</Grid>
//this is usercontrol code
<ListBox Name="OvernightAverageListBox" ItemsSource="{Binding Path=OvernightAverageCollections}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="items" Background="{Binding BackColor}" Height="200" Width="200">
<TextBlock Height="46" HorizontalAlignment="Left" Margin="26,10,0,0" Name="currentRate" Text="{Binding Current_rate}" VerticalAlignment="Top" FontSize="36" />
<TextBlock Height="22" HorizontalAlignment="Left" Margin="26,20,0,0" Name="rate_difference" Text="{Binding RateChange_Value}" VerticalAlignment="Top" FontSize="20" />
<TextBlock Height="30" HorizontalAlignment="Left" Margin="26,30,0,0" Name="productName" Text="{Binding Product_name}" VerticalAlignment="Top" FontSize="24" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
//this is binding code on view
<controls:PanoramaItem Header="Overnight Average" Tap="RateTile_Tap">
<Grid x:Name="overnightAverage">
<views:OvernightAverageTileControl x:Name="eventsView"> </views:OvernightAverageTileControl>
</Grid>
</controls:PanoramaItem>
</ListBox>
now acoording to my code the tiles are coming vertically means each tile is taking in one row.
but i want them to come both horizontally and vertically means two tiles in each row.
plz share ur suggetion i am new to xaml designing.
first image shows wat i am getting.
second image is wat i want.
thanks :)
You could replace the StackPanel in your DataTemplate by a Grid:
<DataTemplate>
<Grid Name="items" Background="{Binding BackColor}" Height="200" Width="200">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding Current_rate}" ... />
<TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding RateChange_Value}" ... />
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Product_name}" ... />
</Grid>
</DataTemplate>
You may also specify absolute or relative widths of the columns and heights of the rows by setting the ColumnDefinition.Width and the RowDefinition.Height properties.
I have done it successfully using WrapPanel in toolkit oct 2011.
http://www.windowsphonegeek.com/upload/articles/WrapPanelDemo.zip
In XAML, I have:
<DataTemplate x:Key="AgeItemTemplate">
<Border BorderThickness="0,0,0,0" BorderBrush="#6FBDE8">
<TextBlock Margin="2" Text="{Binding Age}" VerticalAlignment="Center" Grid.Column="1" />
</Border>
</DataTemplate>
How could I use that DataTemplate in code?
I know I can create a new template and linked to a gridview column but I want to define that template in xaml. Is there any way to modify and use that dataTemplate in code behind?
You need to use the findresource method on FrameworkElement.
<DataTemplate x:Key="PersonItemTemplate" x:Name="someTemplate">
<Border BorderThickness="0,0,0,0" BorderBrush="#6FBDE8">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="32" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Image Source="Images/person.png" Width="24" Height="24" Grid.Column="0" HorizontalAlignment="Center" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" Grid.Column="1" />
</Grid>
</Border>
</DataTemplate>
code behind:
template1 = (DataTemplate)FindName("someTemplate");
linkColumn1 = new GridViewColumn
{
Header = "Test",
CellTemplate = template1,
//Width = 88, // Comment out to set to auto
};
gv.Columns.Add(linkColumn1);
as a result I was able to duplicate a column with code:
this is helpful to populate a listview dynamically because it is harder to create the styles on code I believe.