Textblock and HyperlinkButton do not align correctly - silverlight-4.0

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.

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>

UWP TextBox won't stretch in StackPanel

I have a TextBlock and TextBox controls inside StackPanel, and I need to stretch TextBox to resize by the parent size in UWP.
<StackPanel Grid.Column="0" Grid.Row="1" Orientation="Horizontal">
<TextBlock Text="Name:" VerticalAlignment="Center" Width="130" />
<TextBox VerticalAlignment="Center" HorizontalAlignment="Stretch" />
</StackPanel>
This not works.. Any ideas?
The problem is the stack panel will only stretch to the size of the child elements so in your example you will only see one Textblock of 130 pixels and you will not see the TextBox.
To get the functionality you desire you should use a grid with two columns one 130 pixels and the other being * to fill up the entire column space that is available.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="130"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="25"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" Text="Name:" VerticalAlignment="Center" Width="130" />
<TextBox Grid.Row="0" Grid.Column="1"/>
</Grid>
I usually wrap a TextBlock and TextBox pair inside a DockPanel
<DockPanel Grid.Column="0" Grid.Row="1" >
<TextBlock Text="Name:"
VerticalAlignment="Center"
Margin="5"
/>
<TextBox VerticalAlignment="Center"/>
</DockPanel>
Edit
For UWP which doesn't have DockPanel:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid Grid.Column="0" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="Name:"
VerticalAlignment="Center"
Margin="5"
/>
<TextBox Grid.Column="1"
VerticalAlignment="Center" HorizontalAlignment="Stretch" />
</Grid>
</Grid>
I worked out a similar problem in UWP
<StackPanel Margin="{StaticResource SmallTopBottomMargin}" Orientation="Vertical">
<TextBlock Text="Project Name:" />
<TextBox /> <--full width
<TextBlock Text="Exported Template:" /> <--full width
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<TextBox /> <--max width - button width
<Button Grid.Column="1">...</Button>
</Grid>

Make a grid to be closer to the top of the page - XAML

I have the following XAML:
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
Right now the grid is at the center of the screen, I wabt it to be a little bit higher, I can do it with margin, but I don't want any propery with pixel in my page. Is there any other wahy to do it?
Thanks.
The easiest way to get your grid slightly above the centre without using Margins would be to put it in another Grid.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="1.2*"/>
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="1" >
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<PasswordBox HorizontalAlignment="Center" Grid.Row="0" Margin="12" Width="260" Height="32" PlaceholderText="Confirm Password" BorderBrush="#FF755CB0" BorderThickness="1" Opacity="0.9" x:Name="ConfirmPassword"/>
<Button Content="Sign-Up" HorizontalAlignment="Center" Margin="12" Grid.Row="1" Width="260" Height="50" Background="#FF235085" BorderBrush="#FF6749AC" BorderThickness="1" Foreground="White" Opacity="0.9" RequestedTheme="Light" Click="Register_Click"/>
</Grid>
</Grid>
Note the second RowDefinition
<RowDefinition Height="1.2*"/>
This means the second row will take slightly more of the available space than the first row and you can adjust to meet your needs.

Width of controls inside listbox not changing after orientation change

I have a grid inside stackpanel which is inside a listbox.
This grid has a few control elements like rectangles and textblocks.
They stretch to the entire width in portrait but not in landscape.
Snapshot of emulator
This is the XAML:
<ListBox Name="PassList" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<Grid Name="StackPanelWidth" Width="{Binding ElementName=PassList, Path=ActualWidth}">
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="40"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="{Binding ElementName=StackPanelWidth, Path=ActualWidth}"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="White"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
RadiusX="10"
RadiusY="10"
/>
<Rectangle Fill="White"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,10,0,0"
/>
<Rectangle Fill="DarkGray"
Grid.Row="0"
Grid.Column="1"
Height="1"
VerticalAlignment="Bottom"
/>
<TextBlock Name="Country"
Grid.Row="0"
Grid.Column="1"
HorizontalAlignment="Left"
Margin="10,0,0,0"
VerticalAlignment="Center"
Text="{Binding Country}"
Foreground="Black"
FontWeight="Bold"
/>
.............
.............
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Is there any thing wrong with my code?
Any help will be appreciated.
Thanks.
why are you doing this?
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="{Binding ElementName=StackPanelWidth, Path=ActualWidth}"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
Here you are somehow specifying the width because of which its not resizing.
Also the stackpanel will automatically adjust to its child width, so no need to specify binding if thats what you were trying to do.

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>