I currently have the following xaml code to display a list of channels on the left of my interface when a button is clicked:
<Button Content="Channels" Margin="10,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="109">
<Button.Flyout>
<Flyout Placement="Left">
<Grid>
<TextBlock Text="Channels"
FontSize="45.333" FontFamily="Segoe WP Light"
TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="200" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextReadingOrder="DetectFromContent"/>
<ScrollViewer Margin="0,53,0,54" ZoomMode="Disabled">
<ListView Margin ="10,0" ItemsSource="{Binding Channels}" Width="189" ItemTemplate="{StaticResource ChannelTemplate}" x:Name="channelListView" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False" Height="715"/>
</ScrollViewer>
</Grid>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="MaxWidth" Value="200"/>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Button.Flyout>
</Button>
Here's a screenshot:
However, When trying to use similar code for a list of users on the right of the interface, the users list does not appear on the right - it is on the left instead:
<Button Content="Users" Margin="281,0,10,0" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="58">
<Button.Flyout>
<Flyout Placement="Right">
<Grid>
<TextBlock Text="Users"
FontSize="45.333" FontFamily="Segoe WP Light"
TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Top" Height="48" Width="200" FontWeight="Light" OpticalMarginAlignment="TrimSideBearings" TextReadingOrder="DetectFromContent"/>
<ScrollViewer Margin="0,53,0,54" ZoomMode="Disabled">
<ListView Margin ="10,0" ItemsSource="{Binding Channels}" Width="189" ItemTemplate="{StaticResource ChannelTemplate}" x:Name="usersListView" IsTapEnabled="False" IsRightTapEnabled="False" IsHoldingEnabled="False" IsDoubleTapEnabled="False" Height="715"/>
</ScrollViewer>
</Grid>
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
<Setter Property="MaxWidth" Value="200"/>
</Style>
</Flyout.FlyoutPresenterStyle>
</Flyout>
</Button.Flyout>
</Button>
A screenshot of the users list
Is there something I need to do other than <Flyout Placement="Right">? If so, what?
Related
I am looking to add WrapPanel inside my ListBox so that it's item wrap both vertically and horizentally. I was able to achieve this in Windows Phone 8 Sliverlight with Microsoft toolkit with below code;
Windows Phone 8
<ListBox x:Name="ListSection" ItemsSource="{Binding Section}" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="20">
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock Style="{StaticResource PhoneTextBlockBase}"
HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
I understand that Microsoft toolkit it not available in UWP, is there any possibility I could achieve such behavior in UWP?
UWP not working
<ListBox x:Name="ItemsListBox" ItemsSource="{Binding Section}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel HorizontalAlignment="Stretch"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImagePath}" Width="80" Height="80"></Image>
<TextBlock HorizontalAlignment="Center"
Foreground="Black"
Text="{Binding Header}"
FontWeight="Bold"
VerticalAlignment="Center" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thanks!
You must use ListView and ItemsWrapGrid as ItemsPanel
you can check the MSDN docs here with examples
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.itemswrapgrid.aspx
This example is for GridView but is the same for ListView
<GridView>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
you can use the property Orientation to set your items vertically or horizontally.
There is a port of the Toolkit's WrapPanel for UWP in the project WinRTXamlToolkit.
You can get it from NuGet.
Then in your Page add this prefix:
xmlns:toolkit="using:WinRTXamlToolkit.Controls"
Now you can use <toolkit:WrapPanel Orientation="Horizontal" ></toolkit:WrapPanel> as it was before.
#ARH you need to create a custom Panel class which inherits panel class and override MeasureOverride and ArrangeOverride methods.check out following links for reference.
https://msdn.microsoft.com/en-us/library/windows/apps/mt228347.aspx
http://www.visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx
The WrapPanel is available from the Microsoft UWP Toolkit.
Here's some sample code (using v5.0.0):
...
xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
...
<ListView
Name="WrapPanelContainer"
Width="310" Height="200"
Margin="0,40,0,0"
HorizontalAlignment="Left"
Background="LightBlue"
IsItemClickEnabled="True"
>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel VerticalSpacing="10" HorizontalSpacing="10" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<Rectangle Fill="Red" Width="100" Height="50"/>
<Rectangle Fill="Blue" Width="200" Height="50"/>
<Rectangle Fill="Green" Width="50" Height="50"/>
<Rectangle Fill="Yellow" Width="150" Height="50"/>
</ListView>
NOTE: The ListItemView style here removes superfluous padding, allowing the WrapPanel spacing properties to be the control points for layout.
I have several ContentDialogs in a RelativeLayout and want them to appear or have the the vertical alignment to "bottom". But it seems that no matter what I try the dialogs always appear on the top of the screen.
This is how they look now
Any ideas?
Here is a xaml code snippet:
<RelativePanel Height="{Binding ActualHeight, ElementName=Page}" >
<ContentDialog x:Name="EntrepriseDialog"
VerticalAlignment="Bottom"
Title="Vælg entreprise"
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" Grid.ColumnSpan="2" Margin="30,194,-71,-194">
<ListView Name="ListEntreprises" VerticalAlignment="Bottom" SelectionChanged="ListEntreprises_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Margin" Value="0,0,0,1"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Padding" Value="5"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock>
<Run FontSize="15" Text="{Binding Name}"/>
</TextBlock>
<TextBlock Visibility="Collapsed">
<Run Text="{Binding Id}"/>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentDialog>
<ContentDialog x:Name="SaveChooseDialog"
VerticalAlignment="Bottom"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" Grid.ColumnSpan="2" Margin="30,148,-71,-148">
<ListBox Name="ListBoxSaveMode" SelectionChanged="ListBoxSaveMode_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtLocally" Text="Gem lokalt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtServer" Text="Gem på server"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtCancel" Text="Annullér"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
<ContentDialog x:Name="AddPictureDialog"
VerticalAlignment="Bottom"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" Grid.ColumnSpan="2" Margin="30,142,-71,-142">
<ListBox Name="ListBoxAddPicture" SelectionChanged="ListBoxAddPicture_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtFromCamera" Text="Tag et nyt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtFromStorage" Text="Vælg fra kamerarulle"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
</RelativePanel>
EDIT: XAML for entire Page
<Page
Name="Page"
x:Class="...Pages.Documentation.DocumentationCreatePage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:...Pages.Documentation"
xmlns:userControl="using:...Pages.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="#8FBC3E">
<Grid>
<Grid.Background>
<ImageBrush Stretch="UniformToFill" ImageSource="/Assets/Images/mainBg.png" />
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel>
<Grid Height="40" Background="#8FBC3E" >
<StackPanel Orientation="Horizontal">
<Button Name="BtnBack" Click="BtnBack_Click" Margin="20 0 20 0" >
<Button.Template>
<ControlTemplate>
<TextBlock FontSize="20" Foreground="White" FontFamily="Segoe MDL2 Assets" Text=""></TextBlock>
</ControlTemplate>
</Button.Template>
</Button>
<TextBlock Name="TxtTitle" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" FontSize="18"/>
</StackPanel>
</Grid>
<userControl:SyncDataControl></userControl:SyncDataControl>
</StackPanel>
<Grid Grid.Row="1" Name="StackPanel">
<ProgressRing Name="SaveProgressRing" IsActive="False" Foreground="#8FBC3E" Width="40" Height="40" Margin="152,239,87,321" />
<StackPanel Grid.ColumnSpan="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListView Name="ListViewDocumentationItems" ScrollViewer.VerticalScrollMode="Disabled" SelectionChanged="ListViewDocumentationItems_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Height" Value="80"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Center"></Setter>
<Setter Property="Margin" Value="0,0,0,1"></Setter>
<Setter Property="Background" Value="White"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Center">
<StackPanel Padding="0 0 10 0" Orientation="Horizontal" >
<Image Source="{Binding ImageSource}" VerticalAlignment="Center" Height="40" Margin="5 0 5 0"></Image>
<TextBlock Foreground="Black" HorizontalAlignment="Left" VerticalAlignment="Center">
<Run FontWeight="Bold" FontSize="20" Text="{Binding Name}"/>
</TextBlock>
</StackPanel>
<Grid HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Black" VerticalAlignment="Center" Padding="0 0 20 0">
<Run FontSize="15" Text="{Binding Count}"/>
</TextBlock>
<Image Width="15" Height="15" VerticalAlignment="Center" Source="/Assets/Images/rightarrow.png" />
</StackPanel>
</Grid>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<TextBlock Name="TxtDocDesc" TextWrapping="Wrap" Foreground="Gray" Height="53" />
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Name="PicturePanel" Orientation="Horizontal" Margin="15 0 15 0" />
</ScrollViewer>
</StackPanel>
<Button Name="BtnSave" Grid.Row="2" VerticalAlignment="Bottom" FontSize="25" Click="BtnSave_Click" Background="#8FBC3E" Foreground="White" Height="60" Content="Gem" HorizontalAlignment="Stretch" Margin="5 5 5 5"/>
<RelativePanel VerticalAlignment="Stretch" >
<ContentDialog x:Name="EntrepriseDialog" VerticalContentAlignment="Bottom"
RelativePanel.AlignBottomWithPanel="True"
Title="Vælg entreprise"
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" >
<ListView Name="ListEntreprises" VerticalAlignment="Bottom" SelectionChanged="ListEntreprises_SelectionChanged">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="Margin" Value="0,0,0,1"></Setter>
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Padding" Value="5"></Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<StackPanel>
<TextBlock>
<Run FontSize="15" Text="{Binding Name}"/>
</TextBlock>
<TextBlock Visibility="Collapsed">
<Run Text="{Binding Id}"/>
</TextBlock>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</ContentDialog>
<ContentDialog x:Name="SaveChooseDialog"
RelativePanel.AlignBottomWithPanel="True"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}">
<ListBox Name="ListBoxSaveMode" SelectionChanged="ListBoxSaveMode_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtLocally" Text="Gem lokalt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtServer" Text="Gem på server"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtCancel" Text="Annullér"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
<ContentDialog x:Name="AddPictureDialog"
Title=""
PrimaryButtonText=""
IsPrimaryButtonEnabled="{Binding IsChecked, ElementName=checkBoxAgree, Mode=OneWay}"
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}" >
<ListBox Name="ListBoxAddPicture" SelectionChanged="ListBoxAddPicture_SelectionChanged">
<ListBoxItem>
<TextBlock Name="TxtFromCamera" Text="Tag et nyt"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Name="TxtFromStorage" Text="Vælg fra kamerarulle"/>
</ListBoxItem>
</ListBox>
</ContentDialog>
<ContentDialog x:Name="DialogDownloadProgress"
VerticalAlignment="Stretch"
Title=""
MaxWidth="{Binding ActualWidth, ElementName=pageRoot}">
<StackPanel Padding="0,50">
<TextBlock Name="ProgressTitle" Text="Test test" HorizontalAlignment="Center" Padding="0 0 0 20"/>
<ProgressBar x:Name="ProgressBarDownload" HorizontalAlignment="Stretch" IsEnabled="True"></ProgressBar>
</StackPanel>
</ContentDialog>
</RelativePanel>
</Grid>
</Grid>
It seems the positioning of ContentDialog instances is not in the hands of the developer, at least not without custom versions of it. Afaik the OS will decide where to place the dialog for you.
See here for more information:
http://www.reflectionit.nl/blog/2015/windows-10-xaml-tips-messagedialog-and-contentdialog
So if positioning of the dialog is critical then you might have to create a custom control.
First to explain what I am doing here, I want to create a page that list a large number of grouped objects. Selecting an object binds that information to a display on the left. Everything works fine till I change the MainStack Orientation to Horizontal. Once that is changed the page no longer loads. No errors are thrown. When stepping through the process the code behind steps through as it should.
I know its the XAML but am baffled by the cause. It works fine under two circumstances.
If I drop the mainstack stack panel and instead make the display group the header of the GridView it works.
If I put the MainStack orientation to Vertical it loads fine.
Here is the code that does not load:
<StackPanel Name="MainStack" Orientation="Horizontal" Grid.Row="2" >
<StackPanel Name="Stack" Width="480" >
<TextBlock Text="{Binding Nname}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<TextBlock Text="{Binding Nset}" Margin="0,0,0,20" Style="{StaticResource SubheaderTextBlockStyle}" MaxHeight="60"/>
<Image Source="{Binding url}" Height="Auto" Margin="0,0,102,55" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
<ScrollViewer Margin="0,0,0,0" MaxHeight="200">
<TextBlock Text="{Binding Nruling}" Margin="0,0,0,0" Style="{StaticResource BodyTextBlockStyle}"/>
</ScrollViewer>
</StackPanel>
<SemanticZoom x:Name="semanticZoom" Width="Auto" >
<SemanticZoom.ZoomedOutView>
<GridView Foreground="White"
ScrollViewer.IsHorizontalScrollChainingEnabled="False">
<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Group.Key}"
FontFamily="Segoe UI" FontWeight="Light" FontSize="24" />
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
<Setter Property="Margin" Value="4" />
<Setter Property="Padding" Value="10" />
<Setter Property="Background" Value="#FF25A1DB" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Bottom" />
</Style>
</GridView.ItemContainerStyle>
</GridView>
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Items In Group"
TabIndex="1"
Padding="120,126,120,50"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
SelectionMode="Single"
ScrollViewer.IsHorizontalScrollChainingEnabled="False" SelectionChanged="itemGridView_SelectionChanged">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid MaximumRowsOrColumns="8" GroupHeaderPlacement="Top" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="110" Width="480" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding url}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Nname}"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Nname}" Style="{StaticResource TitleTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nset}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Nruling}" Style="{StaticResource BodyTextBlockStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemContainerStyle>
<Style TargetType="FrameworkElement">
<Setter Property="Margin" Value="52,0,0,2"/>
</Style>
</GridView.ItemContainerStyle>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Margin="10">
<TextBlock Text='{Binding Key}' Foreground="{StaticResource ApplicationForegroundThemeBrush}" FontSize="25" Margin="5" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
</SemanticZoom.ZoomedInView>
</SemanticZoom>
<!-- Horizontal scrolling grid -->
</StackPanel>
I have the below XAML and it does not do what I expect it to do.
<StackPanel Background="{Binding EwsColour}" Visibility="{Binding EwsVisibility}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Text="EWS" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Top" FontWeight="SemiBold" HorizontalAlignment="Center" />
<TextBlock Text="18" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="SemiBold" FontSize="100" />
</StackPanel>
I end up with this
I don't understand why the TextBlock that has 18 in, is growing bigger then then StackPanel. Can anyone tell me why?
After seeing Chris W''s comment I checked the Style in generic.xaml.
<Style x:Key="SubheaderTextBlockStyle" TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
<Setter Property="FontSize" Value="26.667"/>
<Setter Property="FontWeight" Value="Light"/>
<Setter Property="LineHeight" Value="30"/>
</Style>
I had no idea that there was a LineHeight property. Overriding it so that its the same as the font size (or bigger actually creates a better UX) stops this from happening.
<StackPanel Background="{Binding EwsColour}" Visibility="{Binding EwsVisibility}" HorizontalAlignment="Center" VerticalAlignment="Center" >
<TextBlock Text="EWS" Style="{StaticResource SubheaderTextBlockStyle}" VerticalAlignment="Top" FontWeight="SemiBold" HorizontalAlignment="Center" />
<TextBlock Text="18" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="SemiBold" FontSize="100" LineHeight="110" />
</StackPanel>
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>