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.
Related
I have 5 buttons.
One button should control the other buttons.
One button should make all other buttons checked.
I wrote the code for the full consent button xaml like this
<ToggleButton VerticalAlignment="Center" Width="230" Height="95"
Command="{Binding Path=AllButtonCommand}"
CommandParameter="ButtonAll" Style="{StaticResource ButtonStyle.AllButtonButtonStyle}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="full agreement" /></StackPanel>
</ToggleButton>
<ToggleButton VerticalAlignment="Center" Width="66" Height="66" Command="{Binding Path=AgreeCommand}" CommandParameter="Agree" Style="{StaticResource ButtonStyle.AgreeButtonStyle}" >
<StackPanel Orientation="Horizontal">
<Image Grid.Row="0" Grid.Column="0" Width="30" Height="25"
Source="/Common/Images/check.png"/>
</StackPanel>
</ToggleButton>
I want to change it to one with a background color like the first image when I click the agree all button like the image, and when I click it again I want to change it to one with no background color
I wish there was someone who could help
I want to customize my message dialog as shown in following figure
How do I perform that I have prepared xaml for this
<StackPanel Name="rootStackPanel" Height="Auto" Background="#363636" VerticalAlignment="Top">
<StackPanel Margin="10">
<StackPanel Margin="0,0,0,10" Orientation="Horizontal">
<TextBlock x:Name="HeadingText" x:FieldModifier="public" Style="{StaticResource ApplicationMessageBoxHeadingStyle}" Text="Alert" />
<Image Margin="10,05,0,0" Source="/Assets/Images/alert.png" Width="35"></Image>
</StackPanel>
<TextBlock x:FieldModifier="public" x:Name="ContentText" Style="{StaticResource ApplicationMessageBoxErrorStyle}" Text="Pease enter a valid plate number" />
<Button x:FieldModifier="public" Name="OkButton" Margin="0,20,0,0" Padding="0" HorizontalAlignment="Left" Content="Ok" Style="{StaticResource ApplicationThemeButtonStyle}"/>
</StackPanel>
</StackPanel>
The exact look you have there is non-standard, and if you want that exact thing you'll need to write some custom code. If the important part is the icon in the alert title then this is pretty easy with a ContentDialog.
The MessageDialog isn't customizable, but the ContentDialog is. There is a template to add a new ContentDialog to your project with the Add.New Item... menu.
Once you have your ContentDialog files you can customize the template to title its button "OK":
<ContentDialog
x:Class="MyApp.AlertDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MyApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Title="Alert"
PrimaryButtonText="OK"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
>
And include your alert.png along with the Title in the title template. A more advanced version would allow binding different icons for different purposes.You could also fill a path instead of drawing a png so the icon will scale more easily.
<ContentDialog.TitleTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}" Foreground="{ThemeResource PhoneAccentBrush}"/>
<Image Source="/Assets/Images/alert.png" />
</StackPanel>
</DataTemplate>
</ContentDialog.TitleTemplate>
And then include the rest of the contents in the ContentDialog's Xaml:
<StackPanel>
<TextBlock x:FieldModifier="public" x:Name="ContentText" Style="{StaticResource ApplicationMessageBoxErrorStyle}" Text="Pease enter a valid plate number" />
</StackPanel>
This will put the OK button in its standardized location at the bottom right. If you want to include it with the text you can stick it in your StackPanel like in your sample code and not set the PrimaryButtonText on the ContentDialog.
Create a Usercontrol in the project.
Put the entire xaml code in the Usercontrol.
Now you can use this Usercontrol as a popup wherever you want to use it.
Popup msgpopup = new Popup( );
msgpopup.child = new CustomisedMessageDialogControl(); //name of ur Usercontrol
And to open this Dialog simply,
msgpopup.IsOpen = true;
I am very new to XAML code, but I want to try and code a personal program. I have started with XAML but anything I add does not show up. Here is my code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Home" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="7,725,0,0" Height="36" Width="91" BorderBrush="Orange" Foreground="Orange" FontFamily="BankGothic Md Bt"/>
<Image HorizontalAlignment="Left" Height="768" VerticalAlignment="Top" Width="1366" Source="C:/Users/Flynn/Desktop/BG.gif" Visibility="Visible"/>
</Grid>
</Page>
The button nor the image is showing up when I run the program. Can someone point me in the right direction? Thanks for your help!
To set a background to a grid, just keep your image in Images folder and add this code inside grid
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="..\Images\background.jpg" AlignmentY="Top" AlignmentX="Center"/>
</Grid.Background>
Please try this code.It works
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Home" HorizontalAlignment="Left" VerticalAlignment="Top" Height="36" Width="91" BorderBrush="Orange" Foreground="Orange" FontFamily="BankGothic Md Bt"/>
<Image Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center" Source="Images/super.jpg"/>
</Grid>
You should define the background property like this
You must add in to App.xaml (for color resource)
<Application.Resources>
<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="BlueViolet"/>
</Application.Resources>
Image source have to be in your solution (application)
My environment is: Visual Studio 2013 on Windows 8.1 using C++/CX and XAML.
I have a very simple MenuFlyout attached to a button that has a very odd behavior. You can click it once then selected a MenuFlyoutItem, however if you click it a second time it inverts all the colors on the page (such as the background turns white, which was black).
<Button HorizontalAlignment="Left" Margin="10,0,0,0" VerticalAlignment="Top" Height="55" Width="434" FontSize="25">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding DataContext.EmployeeList[0].PayFrequency, Mode=TwoWay}" Foreground="White"/>
<Button.Flyout>
<MenuFlyout Placement="Top">
<MenuFlyoutItem x:Name="WeeklyOption" Text="Weekly" Click="WeeklyOption_Click"/>
<MenuFlyoutItem x:Name="BiWeeklyOption" Text="Bi-Weekly" Click="BiWeeklyOption_Click"/>
<MenuFlyoutItem x:Name="MonthlyOption" Text="Monthly" Click="MonthlyOption_Click"/>
<MenuFlyoutItem x:Name="BiMonthlyOption" Text="Bi-Monthly" Click="BiMonthlyOption_Click"/>
</MenuFlyout>
</Button.Flyout>
</Button>
as far as I can tell I'm not messing with any Styles or any colors anywhere.
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.