UWP ListView items not filling ListView's Width - xaml

I have a ListView with a set width of 1000 and I would like the items to expand to fill this width if their width is set to 1000 or more.
All answers I have found yet suggest this
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</ListView.ItemContainerStyle>
which is failing to do anything.
Here's the ListView code.
<ListView Width="1000" Background="Violet">
<ListView.ItemTemplate>
<DataTemplate>
<Grid Width="1000" Background="Black" HorizontalAlignment="Center">
<TextBlock Text="{Binding}"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.Items>
<x:String>ITEM1</x:String>
<x:String>ITEM2</x:String>
</ListView.Items>
</ListView>
I tried ListBox and this behavior is present there as well. Apparently, the items can fill the original width minus 24 so, if I set my item's width to 976, it perfectly fills the container. Anymore and it gets hidden behind the container.
Thanks.

The problem is that the ListViewItem container has a padding, which is 12 epx from all sides. To remove it, set the property to 0 as well:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0" />
</Style>
</ListView.ItemContainerStyle>

Related

Change Background color of flyout (UWP)

I have a Flyout control on my page and I want to change the background color of it. How can I achieve this?
<Button x:Name="btn" Background="Transparent">
<Image HorizontalAlignment="Center" />
<Button.Flyout >
<Flyout Placement="Left" >
<ListView ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Green" VerticalAlignment="Stretch"
SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Extended" HorizontalAlignment="Stretch" >
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView>
</Flyout>
</Button.Flyout>
</Button>
If I give Background for child element, It gives a margin between flyout and child element, so it's not acceptable. Presently look like this
To change the background color of Flyout, you can try to style the properties of the internal FlyoutPresenter that is presenting the Content of a Flyout. For example:
<Button.Flyout>
<Flyout Placement="Left">
<Flyout.FlyoutPresenterStyle>
<Style TargetType="FlyoutPresenter">
<Setter Property="Background" Value="Green"/>
</Style>
</Flyout.FlyoutPresenterStyle>
<ListView ItemsSource="{x:Bind DDLItemsSource, Mode=OneWay}" Background="Green" VerticalAlignment="Stretch" SelectionChanged="StudentsList_SelectionChanged" x:Name="StudentsList" SelectionMode="Extended" HorizontalAlignment="Stretch" >
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView>
</Flyout>
</Button.Flyout>

Using Same MahApps Button Style Twice in Single UserControl Isn't Working

I have a series of button styles (add, edit, delete, etc.) that make use of the MahApps Metro cirucular button style but apply specific images to the button style. When I use any of the styles only once in a UserControl they work just fine and I get the anticipated look from the styles. However, when I use the styles more than once in a single UserControl, only one of the style instances acts as behaved, the others drop the image I am expecting to see.
I have tried naming the specific control instances (in case it was some sort of lifetime management issue) that are using the styles to see if this would fix the issue but it did not. I also tried creating multiple buttons that use the same style properties but do not use the style and that DID work and the buttons showed correctly, but I don't want to go that route as that would defeat the purpose of the styles.
Below is my code for the resource dictionary where I define the button styles. Please note that I have only shown the style for the add button as the other ones are basically the exact same I just change the image type and tool tip. That's why there is the circular button base that I use to define the majority of the style properties.
<!--Reference Dictionaries-->
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" /> Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
</ResourceDictionary.MergedDictionaries>
<!--Circular Control Button Base-->
<Style x:Key="CircularControlButtonBase" TargetType="Button" BasedOn="{StaticResource MahApps.Metro.Styles.MetroCircleButtonStyle}">
<Setter Property="Height" Value="30"/>
<Setter Property="Width" Value="30"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{DynamicResource GrayBrush1}"/>
<Setter Property="Foreground" Value="Black"/>
<Style.Triggers>
<!--IsMouseOver Trigger-->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource AccentColorBrush4}"/>
<Setter Property="Foreground" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
<Setter Property="BorderThickness" Value="2"/>
</Trigger>
<!--IsEnabled Trigger-->
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{DynamicResource MahApps.Metro.Brushes.Badged.DisabledBackgroundBrush}"/>
</Trigger>
</Style.Triggers>
</Style>
<!--Add Button-->
<Style TargetType="Button" x:Key="AddButton" BasedOn="{StaticResource CircularControlButtonBase}">
<Setter Property="ToolTip" Value="Add"/>
<!--Icon Image-->
<Setter Property="Content">
<Setter.Value>
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<iconPacks:PackIconMaterial Kind="Plus"/>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And I consume the styles like this.
<UserControl x:Class ="TestClass"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<!--The image on this button won't come through.-->
<Button Style="{DynamicResource AddButton}"/>
<!--The image on this button will come through.-->
<Button Style="{DynamicResource AddButton}"/>
</UserControl>
I would expect that the the plus sign image would come through on both buttons, instead of just the last button in the xaml code. Any help would be appreciated.
The IconPacks control inside your style will be only created once. You can use the IconPacks control inside the ControlTemplate and bind to the content which is the enum value to avoid this issue:
<Style x:Key="AddButton"
BasedOn="{StaticResource CircularControlButtonBase}"
TargetType="Button">
<Setter Property="ToolTip" Value="Add"/>
<Setter Property="Content" Value="{x:Static iconPacks:PackIconMaterialKind.Plus}"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<iconPacks:PackIconMaterial Width="20" Height="20" Kind="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
<Button Style="{DynamicResource AddButton}"/>
<Button Style="{DynamicResource AddButton}"/>
<Button Style="{DynamicResource AddButton}"/>
</StackPanel>
Namespace are:
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"

Strech ListBox/ItemsControl in UWP

I want to stretch a listbox horizontally and vertically in UWP. I tried some WPF solutions, but none of them worked. (Stretch line to width of Itemstemplate canvas in itemscontrol)
What I tried:
<Page.Content>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Background" Value="AliceBlue" />
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Template>
<ControlTemplate TargetType="ListBox">
<ItemsPresenter Height="252" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBoxItem>asdf</ListBoxItem>
<ListBoxItem>asdfasdf</ListBoxItem>
<ListBoxItem>asdfsdf</ListBoxItem>
<ListBoxItem>34</ListBoxItem>
<ListBoxItem>as2df</ListBoxItem>
<ListBoxItem>asdf</ListBoxItem>
</ListBox>
</Grid>
</Page.Content>
The result is the following:
How can I stretch a listbox in uwp?
You have Explicitly Set the Height="252". That is the reason why it does not show up. Also you set the background of actual ListBox to Green but that is overridden by your ItemsPanelTemplate so Green doesn't show up.
Your final XAML should look something like below.
<ListBox VerticalContentAlignment="Stretch" VerticalAlignment="Stretch" Background="Green">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
<Setter Property="VerticalAlignment" Value="Stretch"></Setter>
<Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
<Setter Property="Background" Value="AliceBlue" />
</Style>
</ListBox.ItemContainerStyle>
<ListBoxItem>asdf</ListBoxItem>
<ListBoxItem>asdfasdf</ListBoxItem>
<ListBoxItem>asdfsdf</ListBoxItem>
<ListBoxItem>34</ListBoxItem>
<ListBoxItem>as2df</ListBoxItem>
<ListBoxItem>asdf</ListBoxItem>
</ListBox>
This is not Tested but should work as you expected.

Scroll Bar Not Showing in Business App - Cosmopolitan Theme

Here is the style from the Styles.xaml.
<Style x:Key="PageScrollViewerStyle" TargetType="ScrollViewer">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0,1,0,1"/>
<Setter Property="Margin" Value="-58,-15,-58,-15"/>
<Setter Property="Padding" Value="58,0,58,0"/>
<Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
</Style>
Regardless of the size of the browser window, nor if I set the values to "Visible" I am not presented with a scroll bar. Any suggestions on how to correct this?
I was fiddling with this and decided to try changing the order of the LayoutRoot Grid and the ScrollViewer and this seems to have fixed it.
I changed
<Grid x:Name="LayoutRoot" DataContext="{StaticResource ViewModel}">
<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
...
</ScrollViewer>
</Grid>
to this:
<ScrollViewer x:Name="PageScrollViewer" Style="{StaticResource PageScrollViewerStyle}">
<Grid x:Name="LayoutRoot" DataContext="{StaticResource ViewModel}">
...
</Grid>
</ScrollViewer>

How Can I Create a Bound List of RadioButtions with ToolTips in Xaml?

I want to create a list of logically related RadioButtons. The RadioButtons are bound for MVVM use. There's ToolTips on each RadioButtons.
Here is a Style that creates a group of logically related RadioButtons by using a ListBox. MyClass contains two String properties: MyName and MyToolTip. The style will display the list of RadioButtons including properly functioning individual ToolTips. This is an all bound, all Xaml solution for MVVM use.
Example usage:
ListBox Style="{StaticResource radioListBox}" ItemsSource="{Binding MyClasses}" SelectedValue="{Binding SelectedMyClass}"/>
Style:
<Style x:Key="radioListBox" TargetType="ListBox" BasedOn="{StaticResource {x:Type ListBox}}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Margin" Value="5" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid Background="Transparent">
<RadioButton Focusable="False" IsHitTestVisible="False" IsChecked="{TemplateBinding IsSelected}" Content="{Binding MyName}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="{Binding MyToolTip}" />
</Style>
</Setter.Value>
</Setter>
</Style>