XAML: why is button on top when I clearly said to go on bottom? - xaml

In XAML, I want the button to go on the BOTTOM of the red rectangle.
I clearly say:
"HorizontalAlignment="Right"
VerticalAlignment="Bottom"
It goes to the right but stays on the top. Why is that?
alt text http://tanguay.info/web/external/buttonTop.png
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="MultiplePages.Page"
Width="300" Height="150">
<StackPanel HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Width="300" Height="150" Orientation="Vertical">
<StackPanel Width="300" Height="100" Background="Blue">
<TextBlock x:Name="theTextBlock" Text="This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. This is page one. "
TextWrapping="Wrap" Height="100" Width="300" HorizontalAlignment="Left"/>
</StackPanel>
<StackPanel Width="300" Height="50" Background="Red">
<Button Name="Switch" Content="Switch Page" Width="100" Height="20"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"/>
</StackPanel>
</StackPanel>
</UserControl>

The StackPanel is meant to take it's sizing from it's elements and it's container (depending on it's orientation), although what you've done looks correct, that's not the way the StackPanel is "meant" to be used. Although it looks like it's the height it's set, it's actual height (that it uses for laying out child controls) is the size of it's content (the button). The StackPanel has it's uses, but if you are doing anything other than a simple stack of controls then you generally should be using something else.
You can fix it by either sticking a sized grid inside:
<StackPanel Width="300" Height="50" Background="Red">
<Grid Height="50">
<Button Name="Switch" Content="Switch Page" Width="100" Height="20"
HorizontalAlignment="Right" VerticalAlignment="Bottom"
/>
</Grid>
</StackPanel>
Or, for that particular layout, you might want to look at DockPanel, which will behave more like you would expect it to.

Related

How do I disable a button going blue when I hover over it IN XAML/VB?

I have created a login form in Visual Studio Blend. However the button I used will go blue when you hover over it. Is there anyway to stop this as it really bugs me. After searching about it some solutions came up however being new to this I don't really understand them. So I am looking for a basic and easy solution.
My XAML code if it helps:
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:NEA"
mc:Ignorable="d"
Title="Log In" Height="297" Width="345">
<Grid Background="#FF403939" Height="267" VerticalAlignment="Top" HorizontalAlignment="Left" Width="337">
<TextBox x:Name="txtUserName" HorizontalAlignment="Left" Height="26.774" Margin="8.778,48.444,0,0" TextWrapping="Wrap" Text="Username" VerticalAlignment="Top" Width="317.529" BorderBrush="White" Background="#FF4D4B4B" Foreground="White"/>
<TextBox x:Name="txtPassword" HorizontalAlignment="Left" Height="26.774" Margin="8.778,88.604,0,0" TextWrapping="Wrap" Text="Password" VerticalAlignment="Top" Width="317.529" BorderBrush="White" Background="#FF4D4B4B" Foreground="White"/>
<CheckBox x:Name="chkRememberMe" Content="Remember Me" HorizontalAlignment="Left" Margin="19.778,137.399,0,0" VerticalAlignment="Top" Foreground="White" Background="#FF726969"/>
<Border x:Name="bor1" BorderBrush="White" BorderThickness="1" Height="41" Margin="8.778,174.864,0,0" CornerRadius="15" Background="#FF499E3C" HorizontalAlignment="Left" Width="317.529" VerticalAlignment="Top">
<Button x:Name="btnLogIn" Content="Log In" BorderBrush="#00707070" ClipToBounds="True" Background="#01F4F7FC" Foreground="White" HorizontalAlignment="Left" Width="297.529" Height="41" VerticalAlignment="Top" Margin="9,-1,0,-1" >
</Button>
</Border>
<Button x:Name="btnForgot" Content="Forgotten Password" HorizontalAlignment="Left" Height="24.601" Margin="186,132.079,0,0" VerticalAlignment="Top" Width="124" Background="#00DDDDDD" Foreground="#FF00C5FF" BorderBrush="#00707070"/>
<Label Content="Sign In" HorizontalAlignment="Left" Height="35.444" Margin="8.778,8,0,0" VerticalAlignment="Top" Width="77.222" Foreground="White" FontSize="18"/>
<Label Content="Don't have an account?" HorizontalAlignment="Left" Height="31" Margin="63.35,233,0,0" VerticalAlignment="Top" Width="147.65" Foreground="#FFA09D9D"/>
<Button x:Name="btnSignUp" Content="Sign Up" HorizontalAlignment="Left" Height="22" Margin="186,234.98,0,0" VerticalAlignment="Top" Width="75.572" Background="#00DDDDDD" BorderBrush="#00707070" Foreground="#FFC3C0C0" FontWeight="Bold"/>
</Grid>
</Window>
The basic answer is to edit the template for the button and modify the background color set in the trigger that uses the IsMouseOver property. I believe you will find this trigger sets the background to "#FFBEE6FD" which is a light blue color.
To edit the button's template, in the Document Outline pane, right click on the button and select Edit Template > Edit a Copy. This will insert the default ControlTemplate for a button. Towards the bottom is the trigger associated with the IsMouseOver property. Below this is the settter for the background where you can change the color if you prefer or, remove the setter and the background will no longer change.
If you right click per the above to edit the template, VS will automatically insert a Template= "your template name" line for the button. You can use this same line for other buttons to achieve the same result. Or, you can create a button style and provide a setter that assigns this template. Then use this style for each button you want this same result.

UWPCommunityToolkit DropShadowPanel keeps Grid from stretching

I want a grid to stretch across the screen while also having a shadow effect applied, for some reason I can't the grid to stretch when placed inside of a DropShadowPanel.
Here is an example of the desired result, but without a shadow effect:
<Grid Background="LightBlue">
<Grid Background="WhiteSmoke" HorizontalAlignment="Stretch" Height="200" VerticalAlignment="Top" Margin="40"/>
</Grid>
Result:
Here is my xaml with a DropShadowPanel:
<Grid Background="LightBlue">
<controls:DropShadowPanel HorizontalAlignment="Stretch" Margin="40">
<Grid Background="WhiteSmoke" HorizontalAlignment="Stretch" Height="200" VerticalAlignment="Top"/>
</controls:DropShadowPanel>
</Grid>
And this hides the second grid entirely.
Why does the grid act differently inside a DropShadowPanel?
And this hides the second grid entirely.
The problem is you have not set HorizontalContentAlignment property of DropShadowPanel. I have modified your code like the following. And it works.
<controls:DropShadowPanel Margin="40"
VerticalAlignment="Center"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
>
<Grid Background="Red" Height="200" HorizontalAlignment="Stretch"/>
</controls:DropShadowPanel>

Wrap VariableSizedWrapGrid when another element obscures it partly

I have the following XAML code.
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VariableSizedWrapGrid Orientation="Horizontal">
<Rectangle Width="400" Height="400" Fill="Green"/>
<Rectangle Width="400" Height="400" Fill="Blue"/>
</VariableSizedWrapGrid>
<Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>
The code generates the following page.
When the app window's width is dimminished, the app window looks like this.
How do I make the blue square wrap (get below the green square) when the pink square obscures it partly?
The exact same thing happen when I use the community toolkit's WrapPanel instead of the VariableSizedWrapGrid. The code below shows how it looks then.
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/>
<wrapPanel:WrapPanel Orientation="Horizontal" >
<Rectangle Width="400" Height="400" Fill="Green"/>
<Rectangle Width="400" Height="400" Fill="Blue"/>
</wrapPanel:WrapPanel>
</RelativePanel>
Initially when you start resizing the page, the WrapPanel's width isn't changing at all and that's why you don't see the green rectangle to go to the second row.
The trick is to give the WrapPanel a right margin that equals to the width of the pink one.
<wrapPanel:WrapPanel Orientation="Horizontal" Margin="0,0,600,0">

WP8 XAML ScrollViewer staying at chosen position

I have a TextBox inside a ScrollViewer, as shown below
<ScrollViewer Name="scrollViewer1" Height="480" HorizontalAlignment="Left" Margin="0,480,8,82" VerticalAlignment="Bottom" Width="480" VerticalScrollBarVisibility="Auto">
<TextBox Name="box1" TextWrapping="Wrap" FontSize="32" IsReadOnly="True" TextAlignment="Center"/>
</ScrollViewer>
I don't want VerticalAlignment="Bottom" as I want to scroll to a specific place in the TextBox and for it to stay there without automatically scrolling to the bottom again.
Thanks

Silverlight ScrollViewer

I have a ContentControl wrapped in a ScrollViewer but for some reason I cant work out even though the content that I place within the ContentControl is bigger than the visible space the scrollbars do not get enabled. The verticalscrollbarvisibilty is set to visible.
When I view my silverlight app the vertical scrollbar is also cut off at the bottom i.e. I cant see the button that you would use for scrolling ownwards.
Can anyone shed any light on this or point me in the right direction.
there is no reason for that may be you are doing something wrong see this code may be this will help you
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
sorry forgot to add the layout grid
<Grid x:Name="LayoutRoot" Background="White">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="200" Height="200">
<Grid Width="500" Height="400">
<TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Text="Hello"/>
<TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Text="World"/>
</Grid>
</ScrollViewer>
</Grid>