A simple button with a flyout that contains a ProgressRing.
<Button Name="cmdStart" Content="Start" HorizontalAlignment="Center" Margin="5,0,5,0">
<Button.Flyout>
<Flyout Placement="Top">
<StackPanel Orientation="Vertical">
<ProgressRing IsActive="True" Width="30" Height="30"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Username" FontSize="16" Width="90" VerticalAlignment="Center"/>
<PasswordBox Name="txtUsername" Width="100" Margin="10,5,5,5"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Password" FontSize="16" Width="90" VerticalAlignment="Center"/>
<PasswordBox Name="txtPassword" Width="100" Margin="10,5,5,5"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="5">
<Button Name="cmdLoginProceed" Content="Login" Margin="5" Tapped="cmdLoginProceed_Tapped"/>
<Button Name="cmdLoginCancel" Content="Cancel" Margin="5" Tapped="cmdLoginCancel_Tapped"/>
</StackPanel>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
Tap on the button, the flyout pops up. No ProgressRing. Close the flyout and tap on the button again, flyout pops up and there it is!
If the flyout is replaced by a Grid or StackPanel (sets as Collapsed) and changed to Visible when tap on the button in button's code, ProgressRing shows as expected.
What have I done wrong?
The ProgressRing in code serves no meaning yet, just to highlight the issue
Edit: Is it possible issues with my installed tool & library version.
My setup:
Microsoft Visual Studio 2015 Version 14.0.23107.0 D14REL
Microsoft .NET Framework Version 4.6.00079
Visual C# 2015 Microsoft Visual C# 2015
Visual Studio Tools for Universal Windows Apps 14.0.23121.00 D14OOB
Related
I'm building a UWP in C# with Visual Studio, and need to hide and show a NavigationView, named 'navigationView' as required.
I am using the property .IsPaneVisible to achieve this, but am encountering a strange bug:
I can set IsPaneVisible = true or false in the xaml document, but if I set navigationView.IsPaneVisible = false; in the related C# document, and run a debug build of the app from Visual Studio, the app crashes with the error
System.ArgumentException: 'The parameter is incorrect.
Even stranger, if I run the same debug build, but launched directly, outside Visual Studio, the app functions normally without crashing at this line.
Does anyone have an idea of why this might be happening or how I could fix it?
Here's the xaml code:
<Page
x:Class="Sheet_Music_Reader.Views.ShellPage"
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:i="using:Microsoft.Xaml.Interactivity"
xmlns:behaviors="using:Sheet_Music_Reader.Behaviors"
xmlns:winui="using:Microsoft.UI.Xaml.Controls"
xmlns:helpers="using:Sheet_Music_Reader.Helpers"
xmlns:views="using:Sheet_Music_Reader.Views"
Loaded="OnLoaded"
mc:Ignorable="d">
<Page.Resources>
<!--This top margin is the height of the custom TitleBar-->
<Thickness x:Key="NavigationViewContentMargin">0,48,0,0</Thickness>
<Thickness x:Key="NavigationViewContentGridBorderThickness">0</Thickness>
<SolidColorBrush x:Key="NavigationViewContentBackground" Color="Transparent"></SolidColorBrush>
</Page.Resources>
<Grid>
<Border x:Name="AppTitleBar"
IsHitTestVisible="True"
VerticalAlignment="Top"
Background="Transparent"
Height="40"
Canvas.ZIndex="1"
Margin="48,8,0,0">
<StackPanel Orientation="Horizontal">
<Image x:Name="AppFontIcon"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Source="Assets/Square44x44Logo.png"
Width="16"
Height="16"/>
<TextBlock x:Name="AppTitle"
Text="enScore"
VerticalAlignment="Center"
Margin="12,0,0,0"
Style="{ThemeResource CaptionTextBlockStyle}"/>
</StackPanel>
</Border>
<winui:NavigationView
IsBackButtonVisible="Visible"
IsBackEnabled="{x:Bind IsBackEnabled, Mode=OneWay}"
SelectedItem="{x:Bind Selected, Mode=OneWay}"
ItemInvoked="OnItemInvoked"
IsSettingsVisible="True"
IsTitleBarAutoPaddingEnabled="False"
DisplayModeChanged="NavigationViewControl_DisplayModeChanged"
Canvas.ZIndex="0"
x:Name="navigationView">
<winui:NavigationView.MenuItems>
<winui:NavigationViewItem x:Uid="Shell_Main" Icon="Copy" helpers:NavHelper.NavigateTo="views:MainPage" />
</winui:NavigationView.MenuItems>
<i:Interaction.Behaviors>
<behaviors:NavigationViewHeaderBehavior
DefaultHeader="{x:Bind Selected.Content, Mode=OneWay}">
<behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
<DataTemplate>
<Grid x:Name="headerGrid">
<TextBlock
Text="{Binding}"
Style="{ThemeResource TitleTextBlockStyle}"
Margin="{StaticResource SmallLeftRightMargin}" />
<Button Style="{ThemeResource ButtonRevealStyle}" Content="Refresh Library Contents" HorizontalAlignment="Right" Margin="0,45,8,0" Click="RefreshLibrary"/>
<Button Style="{ThemeResource ButtonRevealStyle}" Content="Import PDF To Current Folder" HorizontalAlignment="Right" Margin="0,-35,140,0" Click="AddScore"/>
<Button Style="{ThemeResource ButtonRevealStyle}" Content="Add New Folder" HorizontalAlignment="Right" Margin="0,-35,8,0" Click="AddFolderAsync"/>
<ToggleButton Style="{ThemeResource ToggleButtonRevealStyle}" x:FieldModifier="public" x:Name="tbtndelete" Content="Delete Items" HorizontalAlignment="Right" Margin="0,45,191,0" Tapped="DeleteItem"/>
</Grid>
</DataTemplate>
</behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
</behaviors:NavigationViewHeaderBehavior>
</i:Interaction.Behaviors>
<Grid>
<Frame x:Name="shellFrame" />
</Grid>
</winui:NavigationView>
</Grid>
</Page>
Try to change the placement of the menu with:
PaneDisplayMode="Top"
For my case with Microsoft.UI.Xaml.Controls for Microsoft.WindowsAppSDK v1.0.0.
the showing/hidding of menu bar works fine.
Left, LeftMinimal, LeftCompact crashes the app.
I know you may expect the menu on the left, but still on the top is not that bad idea ;-) At least it works.. Greetz.
In a windows 8.1 project i have the following button with a flyout.
<Button x:Name="FilterCompanyMeetings2" Foreground="White" Content="Company Meetings" Margin="15,58,0,0" Height="40" VerticalAlignment="Top" Style="{StaticResource ButtonStyle2}">
<Button.Flyout>
<Flyout>
<StackPanel Width="406">
<TextBlock Text="Insert the value and tap the Send button:" FontSize="16"
FontWeight="SemiLight" FontFamily="Segoe UI"
Margin="0,0,0,10" />
<TextBox x:Name="ValueTextBox" />
<Button Content="Send" HorizontalAlignment="Right"
FontSize="16" Margin="0,10,0,0" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
Im having a issue when i press the button, the flyout appears as expected but all other buttons change their background to a gray color and some of them change their foreground to black.
I dont use this button for anything at the moment, but when i press it that happens.
Why does it change style of other button on the page?
I'm developing a Turing Machine simulator for a class on theory, and I'm trying to change the background color of the input area based upon whether the machine would accept the language (basically, one color over the other depending on if it's valid input).
Since I want to provide a couple example inputs, it needs to be a ComboBox. Since the professor needs to test his own inputs, it must be editable as well. So, here we are.
I've tried setting the ComboBox.Background property both programmatically and using XAML (via the Property editor), and neither work. I have no problem setting ComboBox.Foreground, however.
Here is my XAML:
<Window x:Class="Turing.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Turing Machine Emulator" Height="400" Width="600" Loaded="onload" MinHeight="500" MinWidth="600">
<Grid>
<ComboBox x:Name="drpProblem" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="120" SelectionChanged="changeproblem"/>
<Label x:Name="lblDescription" Content="Language Description" Margin="135,7,90,0" VerticalAlignment="Top"/>
<Grid Margin="10,0,10,35" Height="24" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="10*"/>
</Grid.ColumnDefinitions>
<Label x:Name="lblLeft" Content="left" HorizontalContentAlignment="Right" VerticalContentAlignment="Center" Padding="0" Margin="0,0,10,0" FontFamily="Consolas"/>
<Label x:Name="lblRight" Content="right" Grid.Column="2" VerticalContentAlignment="Center" Padding="0" Margin="10,0,0,0" FontFamily="Consolas"/>
<Label x:Name="lblCenter" Content="cur" Grid.Column="1" Height="24" Padding="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Background="#FFC5FFA4" FontFamily="Consolas" FontSize="16"/>
</Grid>
<Button x:Name="btnIterate" Content="Iterate" Margin="10,0,0,64" Height="20" VerticalAlignment="Bottom" Click="btnIterate_Click" HorizontalAlignment="Left" Width="236"/>
<!-- This one right here -->
<ComboBox x:Name="txtInput" Height="23" Margin="10,0,10,89" Text="Input String" VerticalAlignment="Bottom" FontFamily="Consolas" VerticalContentAlignment="Center" TextBoxBase.TextChanged="cboGetInput" BorderBrush="{x:Null}" Foreground="Black" Background="#FF874343" IsEditable="True" />
<TextBox x:Name="txtMs" Height="20" Margin="251,0,172,64" TextWrapping="Wrap" Text="wait (seconds)" VerticalAlignment="Bottom"/>
<Button x:Name="btnAutoRun" Content="AutoRun" Margin="0,0,10,64" Click="btnAutoRun_Click" Height="20" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="157"/>
<TextBox x:Name="txtTM" Margin="10,38,10,142" TextWrapping="Wrap" Text="Language" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" FontFamily="Consolas" FontSize="14"/>
<Button x:Name="btnLoadLang" Content="Load" Margin="10,0,10,117" Height="20" VerticalAlignment="Bottom" Click="changeproblem"/>
<StatusBar Height="30" VerticalAlignment="Bottom">
<TextBlock x:Name="stTXTName" Text="StateName"/>
<Separator/>
<TextBlock x:Name="stTXTDescription" Text="StateDescription"/>
<Separator/>
<TextBlock x:Name="stTXTTransition" Text="NextTransition"/>
<Separator/>
<TextBlock x:Name="stTXTNext" Text="NextState"/>
</StatusBar>
</Grid>
</Window>
and here is the code I'm using to try to change the colors around:
if (TM.AcceptsString(txtInput.Text))
{
txtInput.Background = Brushes.LightGreen;
txtInput.Foreground = Brushes.LightGreen;
}
else
{
txtInput.Background = Brushes.Pink;
txtInput.Foreground = Brushes.Pink;
}
The foreground changes as expected, but the background color never changes from the default White. Am I doing something wrong? Is there some component control within ComboBox that I need to be setting properties for, as I did with TextBoxBase.TextChanged?
Set the FlatStyle attribute of the ComboBox to FlatStyle.Flat. This resolved a similar issue I experienced when the Win 7 Aero theme is turned on: The backcolor of the ComboBox does not show up in the default FlatStyle setting FlatStyle.Standard.
I had a similar issue and was able to resolve it by auto-generating the template for the ComboBox in Visual Studio 2015 (Right Click ComboBox in Design Window -> Edit Template -> Edit a Copy)
apologize if i am wrong, i am developing metro apps using windows8 preview release using C#.
As we all know we can create bottom app bars.
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781232.aspx
By using below code we can get upload app bar
<Button x:Name="BTNUpload" AutomationProperties.Name="upload" Style="{StaticResource UploadAppBarButtonStyle}"/>
my question is how to create custom app bars?
Like they say in msdn: just customize and add that code in your XAML.
<Page.BottomAppBar>
<AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
<Grid>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
<Button Style="{StaticResource EditAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource RemoveAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource AddAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
<Button Style="{StaticResource RefreshAppBarButtonStyle}" Click="Button_Click"/>
<Button Style="{StaticResource HelpAppBarButtonStyle}" Click="Button_Click"/>
</StackPanel>
</Grid>
</AppBar>
I have a bunch (currently) HyperlinkButtons on my main web page. I want to have 2 versions for the image of each button: selected and unselected. This way when the users enters a page the corresponding button will change to the "selected" image.
Here is an image of what I want to accomplish:
This seems to me like something trivial, but so far I have been running into a stone wall.
I would prefer to do everything from the XAML (but I will be grateful for any solution).
Here is a little of my XAML:
<ScrollViewer x:Name="NavScrollViewer" Margin="-5,12,5,-12" ScrollViewer.VerticalScrollBarVisibility="Visible" IsEnabled="True"
Style="{StaticResource ContentViewerStyle}">
<StackPanel x:Name="ToolboxPanel" Orientation="Vertical" d:LayoutOverrides="Width" Height="Auto">
<HyperlinkButton x:Name="DashboardButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/Dashboard"
Height="50"
/>
<TextBlock Text="Dashboard" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ConfigurationButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/CRSConfiguration"
Height="50"
/>
<TextBlock Text="Configuration" HorizontalAlignment="Center" Height="20" Style="{StaticResource ComponentNameStyle}"/>
<HyperlinkButton x:Name="ScanEnginestionButton"
Content="Assets/icon_dashboard.png"
Style="{StaticResource ToolStyle}"
TargetName="ContentFrame"
NavigateUri="/ScanEngines"
Height="50"
/>...
You need to have a toggle button and set its IsChecked property to toggle among its visual states. You may go through this post Using Toggle Button