I'm able to set Margin property on PivotItem when it is declared as:
<phone:Pivot Margin="50,0,50,0">
<phone:PivotItem Margin="0">
<TextBlock>Text</TextBlock>
</phone:PivotItem>
</phone:Pivot>
But how do I set Margin when I use binding:
<phone:Pivot Margin="50,0,50,0">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Body}"/>
</DataTemplate>
</phone:Pivot.ItemTemplate>
</phone:Pivot>
How do I set Margin on DataTemplate?
You can try using style as follow :
<phone:Pivot Margin="50,0,50,0">
<phone:Pivot.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Body}"/>
</DataTemplate>
</phone:Pivot.ItemTemplate>
<phone:Pivot.ItemContainerStyle>
<Style TargetType="phone:PivotItem">
<Setter Property="Margin" Value="0"/>
</Style>
</phone:Pivot.ItemContainerStyle>
</phone:Pivot>
Related
In the example below, the ListView control understands the width of it's parent container RelativePanel. When looking a the layout in the designer, it is clear that the ListView is filling out to the full width of the RelativePanel. However, even though the RelativePanel inside the DataTemplate is also asking to fill out the width of the parent, it ignores the "align left" and "align right". I can't seem to find any way to get it to recognize it's parent container's size.
Any suggestions here would be appreciated.
<RelativePanel RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<ListView Name="LstOrders" ItemsSource="{x:Bind Vm.OrdersList, Mode=OneWay}"
SelectionMode="None"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
Margin="0,5,0,0">
<ListView.ItemTemplate>
<DataTemplate x:DataType="genericOrder:OrderThumbnailVm">
<RelativePanel Name="PanelThumbnail" Margin="0,0,20,0">
<RelativePanel Name="PanelOrderDetails"
Background="BlueViolet"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
<TextBlock Text="{x:Bind Name}" Margin="8,0,0,0" VerticalAlignment="Center"
Foreground="{x:Bind Deleted, Mode=OneWay, Converter={StaticResource DeletedColor}}"
TextWrapping="WrapWholeWords"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.LeftOf="BtnDeleteRestore"/>
<Button Name="BtnDeleteRestore"
Content="{x:Bind DisplayDelete, Mode=OneWay}"
Click="{x:Bind DeleteOrder}"
RelativePanel.AlignRightWithPanel="True"
FontSize="10"
Height="20"
Padding="0"
Visibility="{x:Bind ShowDeleteButton, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}"/>
</RelativePanel>
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</RelativePanel>
That is because the value of HorizontalContentAlignmentof ListViewItem is Left, we need to override it and make it Stretch. You can find it in the ListViewItem styles and templates.
To solve this problem, as I said, we need to override its style, for example like this:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate >
<RelativePanel>
...
</RelativePanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have made an ListView ItemTemplate and I want it to be responsive (when orientation changes, for example, the listView item changes in size). I am using a Grid as a control for the inner elements of the grid but it is not behaving. The ListView.ItemContainerStyle has property HorizontalAlignment="Stretch" which is the behaviour I want, and the ItemContainerStyle is the correct width. Inside the Border and Grid I have the same HorizontalAlignment="Stretch" and they are overflowing when the TextBox contained inside has lots of text, and when there is little or no text in the TextBox the Border element shrinks to be smaller than the ItemContainerStyle is showing.
<ListView ItemsSource="{Binding TileStories}" x:Name="cont" Margin="0,10,0,10" Background="{StaticResource CustomResourceBrush}" BorderBrush="{StaticResource CustomResourceBrush}" Foreground="{StaticResource CustomResourceBrush}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="20,10,20,10" />
<Setter Property="Foreground" Value="{StaticResource BTVioletBrush}" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Border CornerRadius="20" BorderThickness="0" Width="{Binding ScrollViewerWidth}" Background="White" HorizontalAlignment="Stretch">
<StackPanel Height="160" Orientation="Horizontal">
<Grid Background="black">
<TextBox Text="Example">
</Grid>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Just do this
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
Define MinHeight as 0 for ItemContainerStyle
Add to your ItemContainerStyle
<Setter Property="HorizontalContentAlignment"
Value="Stretch" />
And I think Width="{Binding ScrollViewerWidth}" is not required. You can remove this.
I didn't exactly find a solution but I did find a workaround. The Grid was being bound with Width="0" if I used {Binding ActualWidth, ElementName=StackPanel, Mode=OneWay} where StackPanel was the panel within the data template. I was poking around the designer in VS2013 and figured out that the Width was 0 because (I am assuming) the items in the data template are drawn one by one and therefore the Width was zero when the first template was drawn and so on and so forth. I haven't explained that very well I guess, but the important thing is the solution:
<PivotItem x:Name="Feed">
....
<Border CornerRadius="20" BorderThickness="0" Background="White" HorizontalAlignment="Stretch">
<StackPanel Height="160" Orientation="Horizontal">
<Grid HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Feed, Mode=OneWay}">
........
</Grid>
</StackPanel>
</Border>
...
</PivotItem>
I think that the PivotItem having a non-variable Width meant the Grid had a concrete Width to inherit from.
I have a problem with binding the count to the textblock.
I have a listview that it's items are binded to a Users object properties.
I want to get the count of all items that were binded.
Here is my ListView:
<ListView ItemsSource="{Binding Users}" x:Name="lvUsers">
<ListView.ItemTemplate>
<DataTemplate>
<ListViewItem IsHitTestVisible="False">
<StackPanel>
<facebookControls:ProfilePicture Height="74" Width="74" ProfileId="{Binding FacebookId}" />
<TextBlock Text="{Binding UserName}" FontSize="18" HorizontalAlignment="Center" />
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And here is my TextBlock:
<TextBlock Text="{Binding ElementName=lvUsers, Path=Items.Count, Mode=OneWay}" />
What am I doing wrong?
I know that if my ListView will be without Templates, just ListViewItems, it will work, but I need it to be like that.
Override the template for this ListView.
The sample below basically creates a style where it overrides the control template such that the regular ListView items (the ItemsPresenter) is wrapped in the StackPanel so that the TextBlock with count or whatever else can be added at the bottom.
<ListView ItemsSource="{Binding Users}">
<ListView.Style>
<Style TargetType="{x:Type ListView}">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="1" BorderBrush="LightGray">
<StackPanel>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
<TextBlock Margin="0,4" FontWeight="Bold">
<Run Text="Count: "/>
<Run Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListView}}, Path=Items.Count, Mode=OneWay}"/>
</TextBlock>
</StackPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</ListView.Style>
<ListView.ItemTemplate>
<DataTemplate>
<ListViewItem IsHitTestVisible="False">
<StackPanel>
<facebookControls:ProfilePicture Height="74" Width="74" ProfileId="{Binding FacebookId}" />
<TextBlock Text="{Binding UserName}" FontSize="18" HorizontalAlignment="Center" />
</StackPanel>
</ListViewItem>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
How can I make content of each ListView item expands to 100% width when using a DataTemplate?
I have tried HorizontalContentAlignment="Stretch" in the ListView and HorizontalAlignment="Stretch" in the DataTemplate, but nothing seems to work, content is still aligned to the left.
I have something like this:
<ListView x:Name="questionsView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" HorizontalContentAlignment="Stretch">
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="BlueViolet" HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Stretch">
<TextBlock Text="{Binding}" />
<TextBlock HorizontalAlignment="Right">16 minutes ago</TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I guess there is one more layer between the ListView and the ItemTemplate.
I got it. Setting the ListView.ItemContainerStyle with a HorizontalContentAlignment setter makes the trick. I.e.:
<ListView x:Name="questionsView" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ListView.ItemTemplate>
<DataTemplate>
<Border Background="BlueViolet">
<Grid HorizontalAlignment="Stretch" Margin="0">
<TextBlock Text="{Binding}" />
<TextBlock HorizontalAlignment="Right">16 minutes ago</TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
Set the item container's property of HorizontalContentAlignment to Stretch, try this
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
What is important here is the ScrollViewer.HorizontalScrollBarVisibility, TextWrapping and ItemContainerStyle with HorizontalContentAlignment. The rest is fluff.
<ListView VerticalAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Prop1}" TextWrapping="Wrap"/>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
The following code gives me the error (cannot add type Object to Stackpanel).
How can I say .ToString() in XAML?
<Window.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=FirstName}"/>
</StackPanel>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ListBox x:Name="theCustomers"/>
</Grid>
binding in code-behind with ADO.NET Entity Framework:
MainEntities db = new MainEntities();
var customers = from c in db.CustomersSet
select c;
theCustomers.ItemsSource = customers;
You need to set the property ContentTemplate, not Content.
Try:
<Setter Property="ContentTemplate" >
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=FirstName}"/>
<TextBlock Text=" "/>
<TextBlock Text="{Binding Path=LastName}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
See this article