Hub alignment inside other element - xaml

How do I make Hub to fill the rest of space? Not less and not more. In case of longer Listview the Hub ends below screen.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<controls:PageHeader Content="Main Page">
<controls:PageHeader.SecondaryCommands>
…
</controls:PageHeader.SecondaryCommands>
</controls:PageHeader>
<Hub>
<HubSection>
<DataTemplate>
<ListView>
…
</ListView>
</DataTemplate>
</HubSection>
<HubSection>
…
<HubSection>
</Hub>
</Grid>


Try this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<controls:PageHeader Content="Main Page">
<controls:PageHeader.SecondaryCommands>
…
</controls:PageHeader.SecondaryCommands>
</controls:PageHeader>
</StackPanel>
<Grid Grid.Row="1">
<Hub>
<HubSection>
<DataTemplate>
<ListView>
…
</ListView>
</DataTemplate>
</HubSection>
<HubSection>
…
<HubSection>
</Hub>
</Grid>
</Grid>

Related

UWP ScrollViewer inside a SplitView.Content not scrolling

I´m trying to build a UWP app and I have the follow components:
MainPage:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Name="TituloStackPanel" Orientation="Horizontal">
<Button Name="HamburguerButton" Content="" FontFamily="Segoe MDL2 Assets" Height="50" Width="50" Click="HamburguerButton_Click"/>
<TextBlock Name="Titulo" Text="Estrutura de Dados" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
<SplitView Name="PrincipalSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="200" Grid.Row="1">
<SplitView.Pane>
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="ListasButton" Content="L" Width="50" Height="50" Click="ListasButton_Click"/>
<TextBlock Text="Listas" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="PilhasButton" Content="P" Width="50" Height="50"/>
<TextBlock Text="Pilhas" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button Name="FilasButton" Content="F" Width="50" Height="50"/>
<TextBlock Text="Filas" VerticalAlignment="Center" Margin="10"/>
</StackPanel>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<TextBlock Text="SplitView Content" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</SplitView.Content>
</SplitView>
</Grid>
The next Page will be loaded inside the Content of the SplitView.
<Page>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<ScrollViewer Background="Cyan" Grid.Column="1" VerticalScrollBarVisibility="Auto">
<RelativePanel Padding="20" MaxHeight="700" VerticalAlignment="Top">
<A lot of Components: TextBlocks, TextBoxes, RadioButtons, ... />
</RelativePanel>
</ScrollViewer>
</Grid>
</Page>
The ScrollViewer should work as a Toolbar on the right side of the window. But when I resize the window, the vertical scroll not works.
Full screen:
Resized:

The problem is because your SplitView is in the Row with the <RowDefinition Height="Auto"/>. This makes the SplitView higher than the Screen and does not scroll as a result.
Use <RowDefinition Height="*"/> for this row to make it as high as the screen is.
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<SplitView Grid.Row="1">
....
</SpitView>

Textblock and HyperlinkButton do not align correctly

I'd like to have a hyperlink and a textblocks on the same line, however both controls act somewhat different. The hyperlink is just a few pixels more to the right, like there is a margin but it's not, is it? Just look at this piece of code:
<UserControl x:Class="SilverlightApplication7.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="2" Text="Umsatzsteuerart: " />
<TextBlock Grid.Row="2" Grid.Column="1" Text="Test" />
<TextBlock Grid.Row="3" Grid.Column="0" Text="Hersteller:" />
<HyperlinkButton Grid.Row="3" Grid.Column="1" Content="Test" />
<TextBlock Grid.Row="4" Grid.Column="0" Text="Umsatzsteuerart:" />
<TextBlock Grid.Row="4" Grid.Column="1" Text="Test" />
</Grid>
</UserControl>
Shouldn't all three ui-controls be aligned to the same line? Is there a solution for this problem? HorizontalAlignment doesn't effect anything...

Found the solution myself:
Setting the padding of the HyperlinkButton will align the hyperlink correctly.

Setting ListBox Height in Windows phone

How can i set suitable size for listbox in Portrait Or Landscape views automatically ?
I don't have any problem in portrait view :
But in landscape view the listbox height is not okey , and listbox has not to be on recordpanel.
this is my xaml code :
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#E9E9E9" Offset="0"/>
<GradientStop Color="#FEFEFE" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<MediaElement Name="SoundPlayer" AutoPlay="False" Volume="1" />
<StackPanel Grid.Row="0">
<StackPanel x:Name="StackPanelTopBar" >
</StackPanel>
<phone:Pivot Height="40" Background="#F9A11D" SelectionChanged="Pivot_SelectionChanged" >
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="24" Text="{Binding}" Margin="0,-5,0,0"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="Alle"/>
<phone:PivotItem Header="A-E"/>
<phone:PivotItem Header="F-J"/>
<phone:PivotItem Header="K-O"/>
<phone:PivotItem Header="P-T"/>
<phone:PivotItem Header="U-Z"/>
</phone:Pivot>
<ListBox x:Name="ListBoxAlphabet" Height="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<controls:RoundButton Tag="{Binding File}" Content="{Binding Label}" FontSize="30" ButtonHeight="90" ButtonWidth="90"
HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Background="#FFD0D2D3" Foreground="White" PressedBrush="#F9A11D" BorderBrush="{StaticResource TransparentBrush}" Click="RoundButtonAlphabet_Click" />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
<Grid x:Name="RecordPanel" Grid.Row="1" Margin="0,0,0,8">
<StackPanel VerticalAlignment="Bottom" Height="100">
<userControls:SoundRecorderPanel></userControls:SoundRecorderPanel>
</StackPanel>
</Grid>
</Grid>

I don't know if I understood right, but if you want that record panel is on the alphabets and alphabets-list is scrollable, then I can help.
The reason why alphabets-listbox is on the record panel, is that you put listbox to the stackpanel. And stackpanel is on the grid row, which height-property is auto. If you want that record panel is on to alphabets, you should define your row definition like this:
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
But then of course listbox doesn't fit to the screen and you have to scroll list if you want to see all alphabets.
Edit: You have to also change the stackpanel, where listbox and pivot is, to the grid like this:
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="StackPanelTopBar" Grid.Row="0" >
</StackPanel>
<phone:Pivot Height="80" Background="#F9A11D" Grid.Row="1" SelectionChanged="Pivot_SelectionChanged">
<phone:Pivot.HeaderTemplate>
<DataTemplate>
<TextBlock FontSize="24" Text="{Binding}" Margin="0,-5,0,0"/>
</DataTemplate>
</phone:Pivot.HeaderTemplate>
<phone:PivotItem Header="Alle"/>
<phone:PivotItem Header="A-E"/>
<phone:PivotItem Header="F-J"/>
<phone:PivotItem Header="K-O"/>
<phone:PivotItem Header="P-T"/>
<phone:PivotItem Header="U-Z"/>
</phone:Pivot>
<ListBox x:Name="ListBoxAlphabet" Height="Auto" Grid.Row="2">
// and so on...
Hopefully this helps!

XAML Grid layout

I am developing a XAML based app and I have a spacing/layout issue. I currently have my main page as a 1 column grid. I have a ListBox though in which I need my data template to be displayed over 2 columns. The first data element should take up 75% of the screen and the second data element should take up the rest. When I run my app, the data from my listbox items are bunched on the left hand side of the screen. How can I change this behavior?
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="2*"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="9*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="12"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="12"/>
</Grid.ColumnDefinitions>
<!--My Section-->
<Grid Grid.Row="3" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Selected Location" FontWeight="Bold" Style="{StaticResource grayTextBox}"/>
<Line Grid.Row="1" Grid.Column="0" Stroke="White" StrokeThickness="1" />
<ListBox Grid.Row="2" ItemsSource="{Binding Path=SelectedLocations, Mode=TwoWay}" HorizontalContentAlignment="Stretch" Visibility="{Binding Path=IsSelectedLocationAvailable, Converter={StaticResource visibilityConverter}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Address}" />
<TextBlock Grid.Row="2" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=CityStateZip}" />
<StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal" HorizontalAlignment="Right">
<Rectangle Fill="Orange" />
<Rectangle Fill="Blue" />
</StackPanel>
</Grid>

Why use a Grid to center the content?
I currently have my main page as a 1 column grid
Why use a grid if it has just 1 column? Use margin on the stackpanel items.
<Grid x:Name="LayoutRoot">
<StackPanel Orientation="Vertical">
<TextBlock Text="Selected Location" FontWeight="Bold" Style="{StaticResource grayTextBox}"/>
<Line Stroke="White" StrokeThickness="1" />
<ListBox ItemsSource="{Binding Path=SelectedLocations, Mode=TwoWay}" HorizontalContentAlignment="Stretch" Visibility="{Binding Path=IsSelectedLocationAvailable, Converter={StaticResource visibilityConverter}}">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Name}" />
<TextBlock Grid.Row="1" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=Address}" />
<TextBlock Grid.Row="2" Grid.Column="0" Foreground="#ffb107" Text="{Binding Path=CityStateZip}" />
<StackPanel Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Orientation="Horizontal" HorizontalAlignment="Right">
<Rectangle Fill="Orange" />
<Rectangle Fill="Blue" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>

Where do I place busyindicator to wrap the whole page, so no control is enabled until activity is completed

I am creating an app in Silverlight 4 with MVVM Light.
At present I have a page with many controls ie. StackPanels, Listbox, TexBlocks and Buttons. I have a busyindicator on the page that is bound to a viewmodel. When a button is clicked to say retrieve data from the database the busyindicator displays and vanishes when the call is completed.
This all works as it should.
What I want to happen is that the whole page is wrapped in the busyindicator so that the page dims and nothing works until the event is completed. I have read that you just wrap the control inside the Busyindicator.
No matter where I place the opening of the indicator I get blue lines showing 'The property Content is set more than once.'
I have posted the code below, could anyone explain where to put the indicator code.
<Grid.RowDefinitions>
<RowDefinition Height ="0" />
<RowDefinition Height ="30" />
<RowDefinition Height ="60" />
<RowDefinition Height ="Auto" />
<RowDefinition Height ="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Header" Width="353" Margin="0 0 0 0" Height="30" />
<StackPanel Grid.Row="2" VerticalAlignment="Center" Orientation="Horizontal" >
<Button Grid.Row="2" Grid.Column="0" Content="GetData" Height="35" Width="130" HorizontalAlignment="Left" Margin="0,0,0,0" Command="{Binding GetData}"></Button>
<!-- <toolkit:BusyIndicator Width="150" Height="50" IsBusy="{Binding IsBusy}" BusyContent="Searching ..." /> -->
</StackPanel>
<ListBox x:Name="MyListBox" Grid.Row="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Content="Delete" VerticalAlignment="Center"
Command="{Binding Delete}"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Grid.Row="4" Margin="5,10,0,0" Text="{BindingMessage}"></TextBlock>
</Grid>

You need to put all the content inside the user control as shown below:
<toolkit:BusyIndicator Width="150" Height="50" IsBusy="{Binding IsBusy}" BusyContent="Searching ...">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height ="0" />
<RowDefinition Height ="30" />
<RowDefinition Height ="60" />
<RowDefinition Height ="Auto" />
<RowDefinition Height ="40" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="1" Grid.Column="0" Text="Header" Width="353" Margin="0 0 0 0" Height="30" />
<StackPanel Grid.Row="2" VerticalAlignment="Center" Orientation="Horizontal" >
<Button Grid.Row="2" Grid.Column="0" Content="GetData" Height="35" Width="130" HorizontalAlignment="Left" Margin="0,0,0,0" Command="{Binding GetData}"></Button>
</StackPanel>
<ListBox x:Name="MyListBox" Grid.Row="3">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
<ColumnDefinition Width="70"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Text="{Binding Name}"></TextBlock>
<Button Grid.Row="0" Grid.RowSpan="2" Grid.Column="3" Content="Delete" VerticalAlignment="Center" Command="{Binding Delete}"></Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<TextBlock Grid.Row="4" Margin="5,10,0,0" Text="{BindingMessage}"></TextBlock>
</Grid>
</toolkit:BusyIndicator>