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.
Related
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.
I'd really like to use RelativePanel in a UWP app I'm writing, to simplify visual state.
This is what I want
I've tried to achieve this with the following XAML:
<RelativePanel>
<TextBlock x:Name="Title" Height="50" Margin="15" FontSize="24"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
</TextBlock>
<TextBox x:Name="Editor" Margin="15" Padding="20" HorizontalAlignment="Stretch"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.RightOf="FileList">
</TextBox>
<ListView x:Name="FileList" HorizontalAlignment="Stretch" Margin="15"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="Title">
</ListView>
</RelativePanel>
This isn't working. Editor does not stretch. If I set Editor to RelativePanel.AlignRightWith="FilesList", it stretches past files list and fills the window.
Is there any way to do what I want with RelativePanel? Please don't post suggestions on how to do this in Grid, I can already do that - I want to use RelativePanel in this case
Your Editor control should have -
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.LeftOf="FileList"
RelativePanel.AlignBottomWithPanel="True"
Note it should be LeftOf, not RightOf. You will also need AlignBottomWithPanel set to True.
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 started off with a Grouped Items Page template and have my data displaying in groups. I added some margins around these items to improve spacing, but now when I hover over these items, the margin area shows as highlighted. I'm sure this is an easy one for xaml gurus. Please assist!!
Here's my markup:
<GridView.ItemTemplate>
<DataTemplate>
<!-- ******************* here is my margins ******************* -->
<Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20">
<Grid HorizontalAlignment="Left" Width="390" Height="190">
<Grid.Background>
<ImageBrush ImageSource="/Assets/default.png" Stretch="None"/>
</Grid.Background>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/>
<StackPanel MaxWidth="270">
<TextBlock Text="{Binding Summary}"/>
<TextBlock Text="{Binding Brand}" />
<TextBlock Text="{Binding Detail}" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
Your ItemTemplate just populates over the existing style template for the GridViewItem Style which if you look in the default template shown in that link you'll see a Rectangle named "PointerOverBorder" which is shown (via the VisualStateManager) in the PointerOver state with its Fill set to ListViewItemPointerOverBackgroundThemeBrush.
You could go into the template (right-click, edit template) and remove it, or add your margins, or make it transparent or a number of options. Or could just overwrite the brush resource on the instance to be transparent or something kind of like;
<blah.Resources>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
</blah.Resources>
Hope this helps.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBox HorizontalAlignment="Left" Name="number" Height="72" TextWrapping="Wrap" VerticalAlignment="Top" Width="240" Margin="24,0,0,0" InputScope="Number" MaxLength="3" />
<Button Content="find" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="269,0,0,0" Width="161" RenderTransformOrigin="0.743,0.541" Name="searchbutton" Click="search"/>
</Grid>
<Grid Grid.Row="1" Margin="0,84,0,0" Grid.RowSpan="2">
<phone:WebBrowser x:Name="browser" IsScriptEnabled="True" Background="Black" Foreground="Black"/>
</Grid>
Here is my xaml code for initializing web browser in my app. But, the web browser appears in white color. I have given all coloring properties as much i know. But it stills in same white color. I need to make it transparent.
Here's my sample image files I captured - http://img829.imageshack.us/img829/6956/rt0n.png
Best answer will be much appreciated.
You can change the background color for webbrowser. Just look at this answer
How to make Webbrowser control with black background in Windows Phone 7.1