QT spacer equivalent in WPF - xaml

I have a StackPanel with some vertically alligned controls (stackpanel on the right in this picture:
The last control should always be placed at the bottom of the window inside of the border control (The OK button on the picture). In QT I'd insert a spacer control to push the button down. How do I do that in WPF? Thank you. Here is the xaml:
<Window x:Class="Test.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="354*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Margin="5" Background="Gray" CornerRadius="6" BorderBrush="Gray">
<Viewport3D Grid.Column="0" Name="viewport" ClipToBounds="True">
</Viewport3D>
</Border>
<Border Grid.Column="1" CornerRadius="6" BorderBrush="Gray" Background="LightGray" BorderThickness="1" Margin="5" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Stretch" >
<StackPanel>
<StackPanel Orientation="Horizontal">
<Label Content="Dimension" Name="label1" VerticalAlignment="Center" />
<ComboBox Text="3D" HorizontalAlignment="Right" Name="dimensioncb" VerticalAlignment="Center" IsReadOnly="True" IsEditable="True">
<ComboBoxItem>2D</ComboBoxItem>
<ComboBoxItem>3D</ComboBoxItem>
</ComboBox>
</StackPanel>
<Separator/>
<DockPanel>
<Label Content="Iteration" Name="label2" VerticalAlignment="Center" />
<ComboBox Text="3" HorizontalAlignment="Right" Name="iterationcb" VerticalAlignment="Center" IsReadOnly="True" IsEditable="True">
<ComboBoxItem>1</ComboBoxItem>
<ComboBoxItem>2</ComboBoxItem>
<ComboBoxItem>3</ComboBoxItem>
<ComboBoxItem>4</ComboBoxItem>
<ComboBoxItem>5</ComboBoxItem>
<ComboBoxItem>6</ComboBoxItem>
<ComboBoxItem>7</ComboBoxItem>
<ComboBoxItem>8</ComboBoxItem>
</ComboBox>
</DockPanel>
<Button Content="OK" VerticalAlignment="Bottom"/>
</StackPanel>
</Border>
</Grid>
</Window>

There are a bunch of ways that you can accomplish this in WPF. Shown below is one:
<Border Grid.Column="1" CornerRadius="6" BorderBrush="Gray" Background="LightGray" BorderThickness="1" Margin="5" HorizontalAlignment="Left" Name="border1" VerticalAlignment="Stretch" >
<!--Add a grid control to separate your stackpanel and button-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<StackPanel Orientation="Horizontal">
<Label Content="Dimension" Name="label1" VerticalAlignment="Center" />
<ComboBox Text="3D" HorizontalAlignment="Right" Name="dimensioncb" VerticalAlignment="Center" IsReadOnly="True" IsEditable="True">
<ComboBoxItem>2D</ComboBoxItem>
<ComboBoxItem>3D</ComboBoxItem>
</ComboBox>
</StackPanel>
<Separator/>
<DockPanel>
<Label Content="Iteration" Name="label2" VerticalAlignment="Center" />
<ComboBox Text="3" HorizontalAlignment="Right" Name="iterationcb" VerticalAlignment="Center" IsReadOnly="True" IsEditable="True">
<ComboBoxItem>1</ComboBoxItem>
<ComboBoxItem>2</ComboBoxItem>
<ComboBoxItem>3</ComboBoxItem>
<ComboBoxItem>4</ComboBoxItem>
<ComboBoxItem>5</ComboBoxItem>
<ComboBoxItem>6</ComboBoxItem>
<ComboBoxItem>7</ComboBoxItem>
<ComboBoxItem>8</ComboBoxItem>
</ComboBox>
</DockPanel>
</StackPanel>
<Button Grid.Row="1" Content="OK" VerticalAlignment="Bottom"/>
</Grid>
</Border>
The above XAML, used to replace the right-hand Border in your XAML will produce the following result, and will keep the button on the bottom when re-sizing the window.

Related

Controls going outside of window

I'm attempting to make a "information" page, but when I get to a finished product this happens:
Video of application
So as you can see the poster of the movie and the description is fine to start with, but when the user attempts to use a different size than default it doesn't resize so the the user can see the same information.
Code:
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stretch="UniformToFill" />
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<StackPanel Margin="80">
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick" Style="{StaticResource MaterialDesignRaisedLightButton}">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="{x:Bind Movie.Title}" />
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<StackPanel>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10" />
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100">
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
</StackPanel>
<StackPanel
MinWidth="300"
MaxWidth="600"
Padding="20">
<TextBlock Style="{StaticResource PageTitleStyle}" Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
Style="{StaticResource DownwardDropShadow}" />
<TextBlock
Style="{StaticResource BodyTextStyle}"
Text="{x:Bind Movie.Overview}"
TextWrapping="WrapWholeWords" />
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
So in short, how do I keep the design, but make is so when the window changes size the image & text resizes to stay inside the window and stay visible.
Controls going outside of window
The problem is that when set root panel as StackPanel , the size of children element will be fixed. And it will not change as the window size changes. For solve the this, you could try to use Grid to replace. Please refer the following xaml layout.
<Grid>
<Image
Name="Backdrop"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="Assets/hello.jpg"
Stretch="UniformToFill"
/>
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<Grid Margin="80" >
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Click="ButtonBase_OnClick">
<SymbolIcon Symbol="Back" />
</Button>
<TextBlock
Margin="20,0,0,0"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}"
Text="Grid Test Page"
/>
</StackPanel>
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<Grid
Grid.Row="1"
Margin="0,20,0,0"
HorizontalAlignment="Center"
VerticalAlignment="Top"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid>
<Image
Name="Poster"
MinWidth="200"
MaxWidth="500"
Margin="10"
Source="Assets/hello.jpg"
/>
<Button
Width="100"
Height="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Background="{ThemeResource SystemControlAcrylicElementBrush}"
CornerRadius="100"
>
<Viewbox MaxWidth="60" MaxHeight="60">
<SymbolIcon Foreground="Gray" Symbol="Play" />
</Viewbox>
</Button>
</Grid>
<StackPanel
Grid.Column="1"
MinWidth="300"
MaxWidth="600"
Padding="20"
>
<TextBlock Text="Information" />
<Border
Margin="0,10,0,10"
VerticalAlignment="Bottom"
BorderBrush="Gray"
BorderThickness="1"
/>
<TextBlock Text="Defines a flexible grid area that consists of columns and rows. Child elements of the Grid are measured and arranged according to their row/column assignments (set by using Grid.Row and Grid.Column attached properties) and other logic." TextWrapping="WrapWholeWords" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</Grid>

XAML set datagrid to top 90% of grid, buttons to bottom 10 % all in a tabitem

I have a TabItem which I want to display a DataGrid (MahApps.Metro) in the upper 90% of it and 2 buttons I want to display at the bottom 10% of it. This works when the window is fully enlarged, but when it is not, the scrollviewer is not visible and the controls and elements go off screen. Please help, I've been stuck for hours! Here is my code so far:
<TabItem Header="Queue" FontSize="15">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="77*"/>
<ColumnDefinition Width="24*"/>
</Grid.ColumnDefinitions>
<DataGrid x:Name="songdatagrid" VerticalAlignment="Stretch" ItemsSource="{Binding SongInfo}" VerticalScrollBarVisibility="Auto" AutoGenerateColumns="False" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
<DataGrid.Columns >
<DataGridTemplateColumn x:Name="songinfocolumn" Header="Song Info" Width=".6*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songInfo.Text}" Uid="{Binding SongInfo.Uid}" ToolTipService.ToolTip="Double click to open song in Youtube." MouseLeftButtonDown="tb_MouseLeftButtonDown5" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="requestercolumn" Header="Requester" Width=".18*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding songReq.Text}" Uid="{Binding songReq.Uid}" ToolTipService.ToolTip="Double click to open requester's Twitch page." MouseLeftButtonDown="tb_MouseLeftButtonDown6" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="moveupcolumn" Header="Move Up" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding moveUp.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="moveup" ToolTipService.ToolTip="Click to move this song up in the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_arrow_up}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn x:Name="deletecolumn" Header="Remove" Width=".12*">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Width="35" Height="35" Uid="{Binding delete.Uid}" Style="{DynamicResource MetroCircleButtonStyle}" Click="deleteSong" ToolTipService.ToolTip="Click to remove song from the list.">
<Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill" Visual="{DynamicResource appbar_delete}" />
</Rectangle.OpacityMask>
</Rectangle>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="refresh" IsDefault="True" Background="White" Content="Refresh" Click="Button_Click" FontSize="16" Grid.Column="0" Grid.Row="1"/>
<Button Style="{DynamicResource SquareButtonStyle}" x:Name="clear" IsDefault="True" Background="White" Content="Clear List" Click="clearlist" FontSize="16" Grid.Column="1" Grid.Row="1"/>
</Grid>
</TabItem>
I had to add this to the top to get the Metro horizontal scrollbar working on the tabholder. Other than this, there are just more tabitems.
<TabControl x:Name="tabholder" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="LightBlue"
SelectionChanged="TabControl_SelectionChanged" >
<TabControl.Template>
<ControlTemplate TargetType="TabControl">
<StackPanel>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled">
<TabPanel x:Name="HeaderPanel"
Panel.ZIndex ="1"
KeyboardNavigation.TabIndex="1"
Grid.Column="0"
Grid.Row="0"
IsItemsHost="true"/>
</ScrollViewer>
<ContentPresenter x:Name="PART_SelectedContentHost"
ContentSource="SelectedContent"/>
</StackPanel>
</ControlTemplate>
</TabControl.Template>
The StackPanel and the other Grid panels you have in there are redundant and causing your issues. Also your fixed Width & Height in templates that have their own set size attributes for things like Height are going to give unwanted results. You should only need something like this to accomplish your goal.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="9*"/>
<RowDefinition Height="1*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<DataGrid Grid.ColumnSpan="2">...</DataGrid>
<Button Grid.Row="1" Content="Button 1"/>
<Button Grid.Row="1" Grid.Column="1" Content="Button 2"/>
</Grid>
Cheers!
The StackPanel was causing the issues, everything works now! :D

Last ListBox Item hides behind the command Bar in windows phone 8.1 RT

Inside my xaml page, I have a dynamically generated ListBox, Textblocks and Textboxes in a Stack Panel and it also has a "Page.BottomAppBar" which consists the CommandBar at the bottom of the page.
Code Edit 1 :(Provided Complete XAML UI code)
<Page>
<ScrollViewer VerticalScrollBarVisibility="Auto">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="60"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Foreground="#616161" x:Name="tbHeading1" Text="Event Details" Margin="15,0,0,0" Width="auto" TextWrapping="Wrap" VerticalAlignment="Center" FontFamily="Calibri" FontSize="28" HorizontalAlignment="Left"></TextBlock>
</Grid>
<!--<ScrollViewer VerticalScrollBarVisibility="Auto" >-->
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Background="White" Margin="0,0,0,1">
<!--EVENT TYPE-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,0,0,0" Foreground="#616161" x:Name="tbEventType" Text="Event Type" FontSize="20"></TextBlock>
<ComboBox x:Name="cmbEventType" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" SelectedIndex="-1" SelectionChanged="cmbEventType_SelectionChanged" Margin="15,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock x:Name="txtEventType" Text="{Binding Name}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--END EVENT TYPE-->
<!--SITE-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbSite" Text="Site" FontSize="20"></TextBlock>
<ComboBox x:Name="cmbSite" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" Margin="15,0"
SelectionChanged="cmbSite_SelectionChanged" SelectedIndex="-1">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock x:Name="txtSite" Text="{Binding Name}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--END SITE-->
<!--LOCATION-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbLocation" Text="Location" FontSize="20"></TextBlock>
<ComboBox x:Name="cmbLocation" RequestedTheme="Light" Padding="5,0,0,0" PlaceholderText=" - Tap for Selection - " FontSize="16" FontFamily="Calibri" Width="auto" BorderBrush="#80b656" BorderThickness="2" SelectedIndex="-1" Margin="15,0">
<ComboBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock x:Name="txtLocation" Text="{Binding Location_Description}" Padding="5,0,0,0" Foreground="#80b656" FontFamily="Calibri" FontSize="20" TextAlignment="Left"/>
</Grid>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!--END LOCATION-->
<!--EVENT DATE-->
<TextBlock FontFamily="Arial MT Regular" Margin="15,5,0,0" Foreground="#616161" x:Name="tbEventDate" Text="Event Date" FontSize="20"></TextBlock>
<DatePicker x:Name="txtEventDate" Margin="15,0" Background="White" Foreground="#80b656" FontSize="20" BorderBrush="Silver" HorizontalAlignment="Left" Width="auto" DateChanged="txtEventDate_DateChanged"></DatePicker>
<!--END EVENT DATE-->
<Line x:Name="lineSeparator" Fill="Gray" Stroke="Gray" X2="1" Stretch="Fill" Margin="0"/>
</StackPanel>
<!--ADDITIONAL FIELDS-->
<Grid x:Name="spAdditionalFeilds" Grid.Row="1" Background="White" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="5"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="txtblkAdditionalFeilds" Grid.Row="0" Margin="15,0,0,0" Foreground="#616161" Text="Additional Fields" FontWeight="SemiBold" FontSize="20"></TextBlock>
<ListBox x:Name ="lstAdditionFields" Grid.Row="1" ItemsSource="{Binding AdditionalFieldControl, Mode=TwoWay}" ScrollViewer.VerticalScrollBarVisibility="Disabled" Foreground="Black" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="1" Width="auto" Tapped="lstAdditionFields_Tapped" ScrollViewer.VerticalScrollMode="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Margin="0,5,0,5">
<TextBlock x:Name="txtCaption" FontFamily="Arial MT Regular" Margin="15,5,0,0" Text="{Binding Caption, Mode=TwoWay}" Padding="0,0,0,0" Foreground="#616161" FontSize="20" Width="auto"/>
<Border Margin="15,8,10,0" Padding="2,3,2,3" BorderBrush="#80b656" BorderThickness="2">
<TextBlock x:Name="txtDefaultVal" FontFamily="Arial MT Regular" Text="{Binding StrDefalutValue, Mode=TwoWay}" TextWrapping="WrapWholeWords" Padding="5,0,0,0" Foreground="#80b656" FontSize="20" Loaded="txtDefaultVal_Loaded" />
</Border>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<Line x:Name="lineSeparatorAdditionalField" Grid.Row="2" Fill="Gray" Stroke="Gray" X2="1" Stretch="Fill" Margin="5,0"/>
</Grid>
<!--END OF ADDITIONAL FIELD-->
<!--IMAGE ATACHMENT LIST-->
<Grid x:Name="spImageList" Grid.Row="2" Background="White" Margin="0,12,0,0" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="auto"></RowDefinition>
<RowDefinition Height="auto"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="txtblkAttachmentList" Grid.Row="0" Margin="15,0,0,0" Foreground="#616161" Text="Attachment List" FontWeight="SemiBold" FontSize="20"></TextBlock>
<ListBox x:Name="lbAttachmentList" Grid.Row="1" ItemsSource="{Binding EventAttachment, Mode=TwoWay}" Foreground="Black" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top" BorderThickness="1" Width="auto" Padding="0,0,0,40" ScrollViewer.VerticalScrollMode="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate>
<!--ONE ROW-->
<StackPanel>
<Grid x:Name="attachmentStackPanel" VerticalAlignment="Center" Margin="0,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="15,0,0,0" Source="{Binding AttachmentPath,Converter={StaticResource PathToImage}, Mode=TwoWay}" Width="110" Height="110" ></Image>
<TextBlock x:Name="txtName" Grid.Column="1" Width="auto" Margin="20,0,0,0" Text="{Binding Name,Mode=TwoWay}" Style="{StaticResource BodyTextBlockStyle}" Foreground="#616161" VerticalAlignment="Center" FontFamily="Calibri" FontSize="28" HorizontalAlignment="Left" Loaded="txtName_Loaded" />
<AppBarButton x:Name="btnRemoveImage" Grid.Column="2" Height="50" Icon="Cancel" Width="70" VerticalAlignment="Center" Foreground="Red" Click="btnRemoveImage_Click"></AppBarButton>
</Grid>
<Line x:Name="lineSeparator" Fill="#E0E0E0" Stroke="Gray" X2="1" Stretch="Fill" Margin="5,5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<!--END IMAGE ATACHMENT LIST-->
</Grid>
<!--</ScrollViewer>-->
</Grid>
</ScrollViewer>
<Page.BottomAppBar>
<CommandBar x:Name="CommandBarBottom" IsSticky="False" Background="LightGray" Foreground="#616161" ClosedDisplayMode="Compact">
<CommandBar.PrimaryCommands>
<AppBarButton x:Name="btnSaveEvent" Icon="Save" Label="Done" HorizontalAlignment="Right" Content="Save Event" Click="btnSaveEvent_Click"/>
<AppBarButton x:Name="btnAddAttachment" Icon="Attach" Label="Capture Img" HorizontalAlignment="Right" HorizontalContentAlignment="Right" Content="Capture Image" Click="btnAddAttachment_Click" />
</CommandBar.PrimaryCommands>
</CommandBar>
</Page.BottomAppBar>
Sometimes Last ListBox Item of my UI(List) hides behind the Command Bar(refer attachment).
.
So, I don't want the UI to get hide behind the Command bar.
The UI scrolls perfectly apart from overlapping the Command bar. But sometimes this issue appears when it starts scrolling behind the Command Bar. The ScrollViewer doesn't scroll as per as required in this case.
There are a couple of things:
I would advise you to use a ListView instead of a ListBox unless you need it for some particular reason. For more information refer this.
The Appbar is currently overlapping your content due to your ApplicationView to fix it, you can refer this.

Listiview Item not highlighting when hovering over - UWP (Windows 10)

I have a UserControl used as an item template in a ListView and when I hover a specific item it doesn't highlight it yet I have other ListViews in my project where the specific item is highlighted over.
I've removed the code from my UserControl and copy/pasted it directly in my DataTemplate to check if it was related to the fact that I was using a UserControl but no difference.
This ListView is contained in a SemanticZoom, so again I removed the SemanticZoom to check if the behaviour would change, but to no avail! Still doesn't get highlighted.
All my ListViews have their SelectionMode set to Single and I've got a style defined at the app level which is applied to all my ListViews
This is the code in my UserControl:
<UserControl
x:Class="MyApp.UserControls.ZoomedIn"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp.UserControls"
xmlns:converters="using:MyApp.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="470">
<UserControl.Resources>
<converters:WrapOnConverter x:Key="WrapOnConverter"/>
</UserControl.Resources>
<Grid x:Name="Details"
Background="White"
Grid.Column="0"
Grid.Row="0"
Margin="12,5,12,5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image x:Name="Image"
Source="{Binding Image}"
Width="100"
Height="100"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Image x:Name="Image2"
Source="{Binding Image2}"
Width="30"
Height="30"
Margin="67,67,0,0"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<Image x:Name="Image3"
Source="{Binding Image3}"
Width="30"
Height="30"
Margin="32,67,0,0"
Stretch="UniformToFill"
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
<StackPanel Margin="5,0,5,0"
Grid.Row="0"
Grid.Column="1"
VerticalAlignment="Top">
<TextBlock x:Name="Title"
Text="{Binding Title}"
Foreground="{ThemeResource
SystemControlForegroundAccentBrush}"
FontWeight="SemiBold"
VerticalAlignment="Top"
TextWrapping="{Binding
Converter={StaticResource WrapOnConverter}}" />
<TextBlock x:Name="Time"
Text="{Binding Time}"
Foreground="DarkCyan"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Margin="0,5,0,5" />
<TextBlock x:Name="Description"
Text="{Binding Description}"
Foreground="Black"
TextWrapping="Wrap"
VerticalAlignment="Top"
HorizontalAlignment="Left"
MaxLines="2"/>
</StackPanel>
</Grid>
</UserControl>
And my ListView is defined as follows:
<ListView ItemsSource="{Binding Source={StaticResource cvsDetails}}"
SelectionMode="Single"
SelectedIndex="{Binding SelectedDetailIndex}"
SelectedItem="{Binding SelectedDetail, Mode=TwoWay}"
ItemContainerStyle="{StaticResource ListViewItemStyle}">
<ListView.ItemTemplate>
<DataTemplate>
<usercontrols:ZoomedIn DataContext="{Binding}" />
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="20"
Text="{Binding CategoryName}"
Foreground="{ThemeResource
SystemControlForegroundAccentBrush}"
FontWeight="SemiBold" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="Tapped">
<Core:InvokeCommandAction
Command="{Binding ItemClickCommand}"
CommandParameter="{Binding SelectedDetail}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
</ListView>
Does anyone have any ideas why one ListView would be behaving differently to the others?
Thanks.
The item is not highlighted because you have the Background="White" set, and this color will always be above the highlight color. The UserControl background needs to be set to Transparent.
To make it work the way you want, you need to change the ItemContainerStyle of your ListView. If you have different elements in your ListView you can use ItemContainerStyleSelector.
You can read more about ListViewItem here.
You need the change the Background property of list view items, for example:
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="White"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>

ListBox template, hiding elements

I have a listbox template showing an image and three textboxes. You will see how are they distributed in the code below. My problem is that some items won't have an image and I want the text to fill the whole row in that case.
I've tried not to use a grid, to use a canvas, but I don't know why, when using a canvas inside a listbox, nothing is shown. I don't know if this is easy to accomplish. Here's the code:
<ListBox Grid.Column="0" Grid.Row="1" Background="White" HorizontalAlignment="Stretch" Name="itemList" VerticalContentAlignment="Stretch" SelectionChanged="listBoxSetmana_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="480">
<Grid.RowDefinitions>
<RowDefinition Height="28" />
<RowDefinition Height="17" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="60" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="3" Grid.Column="0" Grid.Row="0" BorderThickness="1" BorderBrush="#FFFF003F" Padding="1">
<Image HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="listImage" Width="36" Height="36" Source="{Binding thumbnail}" />
</Border>
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="0" Name="title" Foreground="Black" Text="{Binding title}" FontWeight="Bold" FontSize="20" />
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="1" Name="published" Foreground="Black" Text="{Binding published}" FontSize="13" />
<TextBlock Padding="0 0 25 0" Grid.Column="1" Grid.Row="2" Name="subtitle" Foreground="Black" Text="{Binding subtitle}" FontSize="16" TextWrapping="Wrap" />
<TextBlock Visibility="Collapsed" Text="{Binding id}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Thank you!
There are several ways to bind this together.
One way is:
add some Padding to the Border
bind the Visibility of the Border to the thumbnail Property using an appropriate ValueConverter
change the width of Column 0 from "60" to "Auto" - then it will disappear when the image is Collapsed.