I have tried to create a xaml UI layout that has buttons, at the moment TILEs. They should have image and text, and both of them should resize according the screen size.
How would you add resizable text/header/title to this?
Thank you for in advance.
<Grid Grid.Column="0" x:Name="MenuGrid" UseLayoutRounding="True" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="3*" MaxHeight="150"/>
<RowDefinition Height="3*" MinHeight="75" />
<RowDefinition Height="3*" MinHeight="75" />
<RowDefinition Height="3*" MinHeight="75" />
</Grid.RowDefinitions>
<Image RenderOptions.BitmapScalingMode="Fant" Grid.Column="0" Grid.Row="0" Source="/Resources/logo.png" VerticalAlignment="Stretch" StretchDirection="DownOnly"/>
<controls:Tile Name="tileInvoice" Width="Auto" Height="Auto" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0,0,0" ToolTip="Invoice">
<controls:Tile.Background>
<ImageBrush Stretch="Uniform" ImageSource="/Resources/invoice.png"/>
</controls:Tile.Background>
</controls:Tile>
<controls:Tile Name="tileCustomer" Width="Auto" Height="Auto" Grid.Row="2" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" Margin="0,0,0,0">
<controls:Tile.Background>
<ImageBrush Stretch="Uniform" ImageSource="/Resources/customer.png" />
</controls:Tile.Background>
</controls:Tile>
<controls:Tile Name="tileItem" Width="Auto" Height="Auto" Grid.Row="3" VerticalAlignment="Stretch" HorizontalContentAlignment="Center" Margin="0,0,0,0">
<controls:Tile.Background>
<ImageBrush Stretch="Uniform" ImageSource="/Resources/item.png"/>
</controls:Tile.Background>
</controls:Tile>
</Grid>
This is not MahApps specific, it's about xaml layout. If you want scalable controls wrap them in a Viewbox
<Viewbox>
<controls:Tile Name="tileInvoice" Width="Auto" Height="Auto" Grid.Row="1" VerticalAlignment="Stretch" Margin="0,0,0,0" ToolTip="Invoice">
<controls:Tile.Background>
<ImageBrush Stretch="Uniform" ImageSource="/Resources/invoice.png"/>
</controls:Tile.Background>
</controls:Tile>
</Viewbox>
I got it working with this code.
<Viewbox Grid.Row="1">
<controls:Tile Name="tileInvoice" Click="tileInvoice_Click" VerticalAlignment="Stretch" ToolTip="{x:Static resx:omniLang.Invoice}">
<controls:Tile.Background>
<ImageBrush ImageSource="Resources/invoice.png" Stretch="Uniform"/>
</controls:Tile.Background>
<TextBlock Name="headerInvoice" Text="{x:Static resx:omniLang.Invoice}" FontSize="22" Foreground="Black" FontWeight="Bold" VerticalAlignment="Center" Margin="0,100,0,0" />
</controls:Tile>
</Viewbox>
Related
I've a split view (UWP) that inside a scrollviewer with horizontal scrolling enabled. The code shown below has a user control embedded with displays data in a horizontally stacked fashion. I've a header menu which upon clicked should open a split view from right to left. But, whenever there is a horizontal scrolling, the split view opened is not responsive. When i resize the window with splitview opened and horizontal scrolling enabled, I see the app not responsive. What should I do to make the split view response.
By default, I see the splitview responsive whenever there is no horizontal scrolling.
The user control (KanbanControl) shown below is basically a gridview that uses ItemsWrapGrid as it's panel template stacked horizontally
Things tried out:-
a) Tried to disable the horizontal scrolling when the split view is about to be opened, but it is of no help.
Any thoughts folks?
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
</ScrollViewer>
Remove the outer scroll viewer from the splitview and wrap it inside the user control Kanban control. This would make the app responsive.
Code snippet is as follows
<Grid Name="ProjectKanbanGrid">
<kanban:KanbanControl x:Name="KanbanCtrl"/>
<SplitView Name="SplitViewPane"
IsPaneOpen="false"
DisplayMode="Overlay"
OpenPaneLength="500" HorizontalAlignment="Right"
FlowDirection="RightToLeft" PaneBackground="White"
BorderBrush="Red" BorderThickness="10"
PaneClosing="SplitViewPane_PaneClosing">
<SplitView.Pane>
<Border BorderThickness="1" CornerRadius="4" BorderBrush="LightGray">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Background="#FAFAFB" Height="50" BorderBrush="#f0f0f0"
CornerRadius="4" BorderThickness="1">
<TextBlock Text="Edit a Task List" FontWeight="Bold"
HorizontalAlignment="Right" Margin="0,10,20,0"/>
</StackPanel>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="50"/>
<RowDefinition Height="30"/>
<RowDefinition Height="50"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<TextBlock Text="Task List" Foreground="Red"
HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,20,0"/>
<TextBox Name="TaskListName" HorizontalAlignment="Right"
Margin="0,0,20,0" Grid.Row="1" VerticalAlignment="Top" BorderThickness="1"
BorderBrush="LightGray" Width="250"/>
<TextBlock Text="Related Milestone" Grid.Row="2"
HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,20,0"/>
<ComboBox Name="MilestoneList" Width="250" IsTextSearchEnabled="True" BorderThickness="1"
BorderBrush="LightGray" Grid.Row="3" Margin="0,0,20,0"
HorizontalAlignment="Right" VerticalAlignment="Center" >
<ComboBox.ItemTemplate>
<DataTemplate>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<StackPanel Orientation="Horizontal" Grid.Row="4"
HorizontalAlignment="Right" Margin="0,0,20,0" VerticalAlignment="Center">
<Button Background="White" Margin="20,0,0,0" Content="Cancel" Click="Cancel_Click"/>
<Button Background="#1e5598" Foreground="White" Content="Update" Margin="5,0,0,0"/>
</StackPanel>
</Grid>
</Grid>
</Border>
</SplitView.Pane>
</SplitView>
<RelativePanel Visibility="{x:Bind kanban.IsShowResultGrid,Mode=TwoWay}"
HorizontalAlignment="Center">
<ProgressRing x:Name="LoadProgressRing"
Width="25"
Height="25"
RelativePanel.AlignVerticalCenterWithPanel="True"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"
IsActive="True" />
<TextBlock x:Name="LoadingMessage" Margin="10,0,0,0" HorizontalAlignment="Center"
Text="Fetching your project layouts"
RelativePanel.AlignVerticalCenterWithPanel="True"
RelativePanel.RightOf="LoadProgressRing"
Visibility="{x:Bind kanban.IsShowProgressRing,Mode=TwoWay}"/>
<TextBlock x:Name="DisplayMsg" Margin="0,0,0,0"
RelativePanel.AlignHorizontalCenterWithPanel="True"
RelativePanel.AlignVerticalCenterWithPanel="True"
Text="{x:Bind kanban.DisplayMessage,Mode=TwoWay}"/>
</RelativePanel>
</Grid>
KanbanControl.xaml
<Grid Margin="0,20,0,0" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Auto"
HorizontalScrollBarVisibility="Auto" Height="Auto"
x:Name="ContentView">
// Horizontally stacked listview goes here.
</ScrollViewer>
</Grid>
I want to split my window in 2 parts side by side, like the picture below. On each side I have a SwapChainPanel and a StackPanel with a TextBlock, a TextBox and a Button.
Below that, I have a console (TextBlock) which takes up the entire width of the window.
How can I do that in XAML?
I have this but it does not split the window into 2 equal parts:
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
<SwapChainPanel>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" >
<TextBlock />
<TextBox />
<Button />
</StackPanel>
</SwapChainPanel>
</StackPanel>
<StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Left" >
<TextBlock />
</StackPanel>
</StackPanel>
StackPanel are for stacking Items One after another or one below another. So you will not get exact split. For that you Need to use Grid.
I marked up a basic XAML based on your Screenshot.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border BorderBrush="Blue" BorderThickness="5,5,2.5,5" Grid.Row="0" Grid.Column="0" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_L" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 1: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Blue" BorderThickness="2.5,5,5,5" Grid.Row="0" Grid.Column="1" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<SwapChainPanel BorderBrush="Blue" BorderThickness="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<TextBlock Text="SwapChainPanel_R" Foreground="Blue" Margin="20"/>
</SwapChainPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="5,0">
<TextBlock Text="IP Address 2: " Foreground="Red" VerticalAlignment="Center"/>
<TextBox BorderBrush="Red" BorderThickness="5" Width="150" Margin="5,0"/>
<Button Content="Connect" Margin="5,0" BorderBrush="Red" BorderThickness="5" />
</StackPanel>
</Grid>
</Border>
<Border BorderBrush="Green" BorderThickness="5" Grid.Row="1" Grid.ColumnSpan="2" Margin="0,5,0,0" Padding="5">
<TextBox Text="> Console" Foreground="Green" />
</Border>
</Grid>
Which Renders to
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.
I have a ListView in my Windows Store App, which selects a template through dataTemplateSelector. In the ItemTemplate of ListView, i have an image. I don't want to fix the height and width of the image, i want to allow it to adjust itself with the space available. So the image can be displayed bigger in big screen size.
Following is my ListView XAML:
<ListView Name="MyListView" ItemTemplateSelector="{StaticResource MyTemplateConverter}"
Height="{Binding ActualHeight, ElementName=scroll, Converter={StaticResource BottomMarginConverter}}" Width="{Binding ActualWidth, Converter={StaticResource GVWIdthConverter}, ElementName=scroll}"
Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Tapped="MyGridView_Tapped">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" VerticalAlignment="Stretch" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="VerticalContentAlignment" Value="Stretch" />
<Setter Property="Margin" Value="0,5,0,5" />
<Setter Property="Background" Value="LightCyan" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="3" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
I have set VerticalContentAlignment to Stretch, this stretches my ListViewItem to the size of ListView, but the problem is when the image inside the Item is bigger, it increases the size of ListViewItem larger than ListView. I have also tried setting the height of ListViewItem in the above code by adding
<Setter Property="Height" Value="{Binding ActualHeight, ElementName=MyGridView}" />
Following is the code of my ItemTemplate, which is being selected through ItemTemplateSelector,
<DataTemplate x:Key="PhotoTemplate">
<Grid x:Name="PhotoTemplateGrid" Width="400" Margin="2" Background="LightPink" >
<Grid.RowDefinitions>
<RowDefinition Height="90"/>
<RowDefinition Height="*"/>
<RowDefinition Height="50"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Margin="5" HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="90" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding from.photoUrl}" Height="70" HorizontalAlignment="Center" VerticalAlignment="Center" Width="70" />
<StackPanel Orientation="Vertical" Margin="10,10,0,0" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Top">
<TextBlock Grid.Column="1" Text="{Binding from.Name}" Style="{StaticResource SubHeaderText}" VerticalAlignment="Top"
IsHitTestVisible="false" TextWrapping="NoWrap" Foreground="{StaticResource StalkerBlueThemeBrush}" />
<TextBlock Text="{Binding created_Time, Converter={StaticResource TextDateConverter}}" Margin="0,0,0,0" Style="{StaticResource BaselineTextStyle}" VerticalAlignment="Top"
IsHitTestVisible="false" TextWrapping="NoWrap" FontSize="12" />
</StackPanel>
</Grid>
<Grid Grid.Row="1" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="5,0,5,0" TextAlignment="Center" MaxHeight="40" HorizontalAlignment="Stretch" Text="{Binding message}" Style="{StaticResource BaselineTextStyle}"
TextTrimming="WordEllipsis" IsHitTestVisible="false" TextWrapping="Wrap" VerticalAlignment="Center" />
<TextBlock Grid.Row="1" MaxHeight="20" Margin="5,0,5,0" TextAlignment="Center" Text="{Binding description}" Style="{StaticResource BaselineTextStyle}"
TextTrimming="WordEllipsis" IsHitTestVisible="false" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Stretch" />
<Image Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Stretch="Uniform" Source="{Binding picture}" Margin="2" />
</Grid>
<Grid Grid.Row="2" Background="LightGray" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="15" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Height="Auto" Background="White" >
<Polygon Points="15,0 0,15 30,15" Stroke="LightGray" Fill="LightGray" Margin="20,0,0,0" />
</Grid>
<Grid Grid.Row="1" HorizontalAlignment="Stretch">
<TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5,0,0,0" Text="View all comments" Style="{StaticResource BaselineTextStyle}" Foreground="{StaticResource BlueThemeBrush}" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Margin="0,0,5,0">
<Image Height="15" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="25" Source="ms-appx:///Assets/CtBlueSmall.png" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" TextWrapping="NoWrap" TextTrimming="WordEllipsis" Text="{Binding CtCount}" Foreground="White" />
<Image Height="15" VerticalAlignment="Center" HorizontalAlignment="Stretch" Margin="0,0,0,0" Width="25" Source="ms-appx:///Assets/LeBlueSmall.png" />
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" TextWrapping="NoWrap" TextTrimming="WordEllipsis" Text="{Binding LeCount}" Foreground="White" />
</StackPanel>
</Grid>
</Grid>
</Grid>
</DataTemplate>
The Grid at Row Number 1 <Grid Grid.Row="1" >, contains the image which makes the height go larger than the ListView. I want to allow this Grid to stretch itself to the size of its parent. But not cross the size of its parent. in other word, i simply want to bind its height to its parent. Please help me out, i am stuck here.
have you tried to change the Row Definition applied for that image to 'Auto'?
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
I have managed to solve this in my own project by binding the Height of the Grid in the DataTemplate to the ActualHeight of the ListView. I does not seem to work if the binding is in the ListView.ItemContainerStyle style as a setter.
<DataTemplate>
<Grid Height="{Binding ActualHeight, ElementName=MyListView}">
...
</Grid>
</DataTemplate>
I have a problem with the first element in a listbox, the arranging is being changed in it.
This is the code:
<Grid x:Name="ContentPanel" Margin="12,10,0,0" Grid.RowSpan="2" Grid.ColumnSpan="2">
<ListBox Margin="10,233,10,0" BorderBrush="White" Hold="ListBox1_Hold" SelectionChanged="ListBox1_SelectionChanged" Height="516" x:Name="ListBox1" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Width="500" Orientation="Vertical" >
<Image Margin="10,30,0,0" HorizontalAlignment="Left" Height="100" Width="150" Source="{Binding Img}" ></Image>
<TextBlock Visibility="Collapsed" Text="ID: "/>
<TextBlock Visibility="Collapsed" Text="{Binding Id}"/>
<TextBlock Visibility="Collapsed" FontSize="30" Text="Place Name: "/>
<TextBlock Margin="160,-110,0,0" HorizontalAlignment="Left" Foreground="Blue" FontSize="30" Text="{Binding PlaceName}"/>
<TextBlock Visibility="Collapsed" Text="Description: "/>
<TextBlock Margin="160,-80,0,0" HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Description}" />
<TextBlock Visibility="Collapsed" Text="Keyword: "/>
<TextBlock Visibility="Collapsed" Text="{Binding Keyword}"/>
<TextBlock Visibility="Collapsed" Text="Longitude: "/>
<TextBlock Visibility="Collapsed" Text="{Binding Long}"/>
<TextBlock Visibility="Collapsed" Text="Latitude: "/>
<TextBlock Visibility="Collapsed" Text="{Binding Latit}"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And here the result of this code:
The Picture
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
// First block
<grid grid.colum="0" grid.row="0" grid.rowspan="2"><image></grid>
<grid grid.colum="1" grid.row="0" ><textblock></grid>
<grid grid.colum="1" grid.row="1" ><textblock></grid>
// Seconde block
<grid grid.colum="0" grid.row="1" grid.rowspan="2"><image></grid>
<grid grid.colum="1" grid.row="2" ><textblock></grid>
<grid grid.colum="1" grid.row="3" ><textblock></grid>
// third block
<grid grid.colum="0" grid.row="2" grid.rowspan="2"><image></grid>
<grid grid.colum="1" grid.row="4" ><textblock></grid>
<grid grid.colum="1" grid.row="5" ><textblock></grid>
</Grid>