XAML归档
Grid
#Grid布局
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock>1</TextBlock>
<TextBlock Grid.Column="1">2</TextBlock>
<TextBlock Grid.Column="2">3</TextBlock>
<TextBlock Grid.Row="1">4</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1">5</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2">6</TextBlock>
<TextBlock Grid.Row="2">7</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">8</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2">9</TextBlock>
</Grid>
hamburgerMenu
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView Name="MySplitView" CompactPaneLength="10" DisplayMode="CompactOverlay" OpenPaneLength="20">
//露出来10，显示icon，限制pane弹出长度
<SplitView.Pane> //影藏的
<StackPanel>
<TextBlock>First</TextBlock>
<TextBlock>Second</TextBlock>
<TextBlock>Third</TextBlock>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<StackPanel>
<TextBlock>Fourth</TextBlock>
<TextBlock>Fifth</TextBlock>
<TextBlock>Sixth</TextBlock>
</StackPanel>
</SplitView.Content> //弹出的
</SplitView>
<Button Content="Click Me" Click="Button_Click"/>
</Grid>
#RelativePanel的相对布局
<RelativePanel>
<Button Name="SearchButton" Content="Search" RelativePanel.AlignRightWithPanel="True" Margin="0,0,10,0" />
<TextBox Name="SearchTextBox" RelativePanel.LeftOf="SearchButton" Width="100" Margin="0,0,10,0" />
<TextBlock Text="Search:" RelativePanel.LeftOf="SearchTextBox" RelativePanel.AlignVerticalCenterWithPanel="True" Margin="0,0,10,0" />
<TextBlock Text="Title" FontSize="24" FontWeight="Bold" Margin="10,0,0,0" />
</RelativePanel>
StackPanel 布局
<Grid Background="White">
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Rectangle Width="200" Height="200" Fill="Bisque" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Rectangle Width="100" Height="100" Fill="Azure" />
<StackPanel Orientation="Vertical">
<Rectangle Width="100" Height="50"
<Rectangle Width="100" Height="50" Fill="DarkCyan" />
</StackPanel>
</StackPanel>
<StackPanel Orientation="Horizontal">
<Rectangle Width="100" Height="100" Fill="Tomato" />
<StackPanel Orientation="Vertical">
<Rectangle Width="100" Height="50" Fill="BurlyWood" />
<Rectangle Width="100" Height="50" Fill="SaddleBrown" />
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
Orientation 摆放方向
Vertical//竖直
Horizontal//水平
VerticalAlignment
垂直对齐方式
窗体加载控件 Frame BackStack
MyFrame.Navigate(typeof(Page1)); //加载页
if(Frame.CanGoBack()
{
MyFrame.GoBack() //向后
}
MyFrame.GoForward(); //向前
//会自动记录顺序
恢复之前页面键入的东西
protected override void OnNavigatedTo(NavigationEventArgs e)
{
value=(string)e.Parameter;
}
#HyperlinkButton
<HyperlinkButton Content="Go to page 2" Click="HyperlinkButton_Click"/>
<HyperlinkButton Content="Go to Microsoft.com" NavigateUri="https://www.microsoft.com" />
Control
<Grid Background="{Theme Resource ApplicationPageBackgroundThemeBrush}" Margin="10,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="CheckBox" VerticalAlignment="Center" />
<StackPanel Grid.Column="1"
Margin="20,10,0,10"
Orientation="Horizontal">
<CheckBox Name="MyCheckBox"
Content="Agree?"
Tapped="MyCheckBox_Tapped" />
<TextBlock Name="CheckBoxResultTextBlock" />
</StackPanel>
<TextBlock Grid.Row="2"
Text="RadioButton"
VerticalAlignment="Center" />
<StackPanel Grid.Row="2"
Grid.Column="1"
Orientation="Horizontal"
Margin="20,10,0,10">
<RadioButton Name="YesRadioButton"
Content="Yes"
GroupName="MyGroup"
Checked="RadioButton_Checked" />
<RadioButton Name="NoRadioButton"
Content="No"
GroupName="MyGroup"
Checked="RadioButton_Checked" />
<TextBlock Name="RadioButtonTextBlock" />
</StackPanel>
<TextBlock Grid.Row="3"
Text="ComboBox"
Name="MyComboBox"
VerticalAlignment="Center" />
<StackPanel Orientation="Horizontal"
Grid.Row="3"
Grid.Column="1"
Margin="20,10,0,10">
<ComboBox SelectionChanged="ComboBox_SelectionChanged" >
<ComboBoxItem Content="Fourth" />
<ComboBoxItem Content="Fifth" />
<ComboBoxItem Content="Sixth" IsSelected="True" />
</ComboBox>
<TextBlock Name="ComboBoxResultTextBlock" />
</StackPanel>
<TextBlock Grid.Row="4" Text="ListBox" VerticalAlignment="Center" />
<StackPanel Grid.Row="4" Grid.Column="1" Margin="20,10,0,10">
<ListBox Name="MyListBox"
SelectionMode="Multiple"
SelectionChanged="ListBox_SelectionChanged">
<ListBoxItem Content="First" />
<ListBoxItem Content="Second" />
<ListBoxItem Content="Third" />
</ListBox>
<TextBlock Name="ListBoxResultTextBlock" />
</StackPanel>
<TextBlock Grid.Row="5" Text="Image" VerticalAlignment="Center" />
<Image Source="Assets/logo.png"
HorizontalAlignment="Left"
Width="250"
Height="50"
Grid.Row="5"
Grid.Column="1"
Stretch="UniformToFill"
Margin="20,10,0,10" />
<TextBlock Grid.Row="7" Text="ToggleButton" VerticalAlignment="Center" />
<StackPanel Orientation="Horizontal"
Grid.Row="7"
Grid.Column="1"
Margin="20,10,0,10" >
<ToggleButton Name="MyToggleButton"
Content="Premium Option"
IsThreeState="True"
Click="MyToggleButton_Click" />
<TextBlock Name="ToggleButtonResultTextBlock" />
</StackPanel>
<TextBlock Grid.Row="8"
Text="ToggleSwitch"
VerticalAlignment="Center" />
<StackPanel Grid.Row="8"
Grid.Column="1"
Margin="20,10,0,10" >
<ToggleSwitch>
<ToggleSwitch.OffContent>
<TextBlock Text="I'm off right now." />
</ToggleSwitch.OffContent>
<ToggleSwitch.OnContent>
<TextBlock Text="I'm on!" />
</ToggleSwitch.OnContent>
</ToggleSwitch>
</StackPanel>
</Grid>
Code
ComboBox
ComboBox_SelectionChanged(e,s)
{
if(ComboBoxResultTextBlock == null)
var combo = (ComboBox)sender;
var item = (ComboBoxItem)combo.SelectedItem;
ComboBoxResultTextBlock.Text=item.Content.Tostring();
}
ToggleButon：1.clicked, 2.unclicked, 3.selected
HamburgerNavigate
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel>
<Button Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="" FontSize="36" Click="HamburgerButton_Click"/>
</RelativePanel>
<SplitView Name="MySolitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="56"
HorizontalAlignment="Left">
<SplitView.Pane>
<ListBox SelectionMode="Single" Name="IconsListBox"
SelectionChanged="IconsListBox_SelectionChanged">
<ListBoxItem Name="ShareListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text=""/>
<TextBlock Text="Share" FontSize="24" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="FavoritesListBoxItem">
<StackPanel Orientation="Horizontal" >
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text=""/>
<TextBlock Text="Favorites" FontSize="24" Margin="20,0,0,0"/>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<TextBlock Name="ResultTextBlock"/>
</SplitView.Content>
</SplitView>
</Grid>
搞基版（
http://bit.do/hamburger-nav
Scroll
<ScrollViewer
HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<Image Source="Assets/Financial.png" Height="800" Stretch="None"/>
</ScrollViewer>
Style
<Page.Resources>
<SolidColorBrush x:Key="Mybrush" Color="Blue"/>
<Style TargetType="Button" x:Key="MyButtonStyle">
<Setter Property="Background" Value="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<Setter Property="FontSize" Value="36"/>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Text="Hello!!!"
Foreground="{StaticResource Mybrush}"/>
<Button Content="My Button Style" Height="100"
Style="{StaticResource MyButtonStyle}" Margin="111,21,0,859"/>
<Rectangle Width="50" Height="50" Fill="{ThemeResource SystemControlAcrylicWindowBrush}"/>
</Grid>
</Page>
more
https://docs.microsoft.com/zh-cn/windows/uwp/design/controls-and-patterns/xaml-theme-resources
https://developer.microsoft.com/en-us/windows/apps/design
hamburger Navigate Demo
<Grid Background="{ThemeResource SystemControlAcrylicElementBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="GlassHost"></Grid>
<RelativePanel Background="{ThemeResource SystemControlChromeHighAcrylicWindowMediumBrush}">
<Button Name="HamburgerButton"
RelativePanel.AlignLeftWithPanel="True"
FontFamily="Segoe MDL2 Assets"
Content=""
FontSize="36"
Click="HamburgerButton_Click" />
<Button Name="BackButton"
RelativePanel.RightOf="HamburgerButton"
FontFamily="Segoe MDL2 Assets"
Content=""
FontSize="36"
Click="BackButton_Click" Background="{ThemeResource SystemControlChromeHighAcrylicWindowMediumBrush}"/>
<TextBlock Name="TitleTextBlock"
Text="Title"
FontSize="36"
RelativePanel.RightOf="BackButton"
Margin="10,0,0,0"
FontWeight="Bold"/>
<Button
Name="SearchButton"
FontFamily="Segoe MDL2 Assets"
Content=""
FontSize="36"
RelativePanel.AlignRightWithPanel="True"
Margin="0,0,0,0" />
<TextBox Name="SearchTextBox"
PlaceholderText="Search..."
FontSize="27"
RelativePanel.LeftOf="SearchButton"
RelativePanel.AlignBottomWithPanel="True"
RelativePanel.AlignTopWithPanel="True"
Width="250"
Margin="0,0,0,0" />
</RelativePanel>
<SplitView Name="MySplitView"
Grid.Row="1"
DisplayMode="CompactOverlay"
OpenPaneLength="200"
CompactPaneLength="56"
HorizontalAlignment="Left">
<SplitView.Pane>
<ListBox Background="{ThemeResource SystemControlChromeHighAcrylicWindowMediumBrush}"
SelectionMode="Single"
Name="IconsListBox"
SelectionChanged="IconsListBox_SelectionChanged">
<ListBoxItem Name="FinancialListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="" Margin="-2,0,0,0" />
<TextBlock Text="Financial" FontSize="24" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
<ListBoxItem Name="FoodListBoxItem">
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="36" Text="" Margin="-2,0,0,0" />
<TextBlock Text="Food" FontSize="24" Margin="20,0,0,0" />
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<Frame Name="MyFrame"/>
</SplitView.Content>
</SplitView>
</Grid>
Code
public MainPage()
{
this.InitializeComponent();
initializeFrostedGlass(GlassHost);
MyFrame.Navigate(typeof(Financial));
TitleTextBlock.Text = "Financial";
BackButton.Visibility = Visibility.Collapsed;
FinancialListBoxItem.IsSelected = true;
}
private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (FinancialListBoxItem.IsSelected)
{
BackButton.Visibility = Visibility.Collapsed;
MyFrame.Navigate(typeof(Financial));
TitleTextBlock.Text = "Financial";
}
else if (FoodListBoxItem.IsSelected)
{
BackButton.Visibility = Visibility.Visible;
MyFrame.Navigate(typeof(Food));
TitleTextBlock.Text = "Food";
}
}
private void HamburgerButton_Click(object sender, RoutedEventArgs e)
{
MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}
private void BackButton_Click(object sender, RoutedEventArgs e)
{
if (MyFrame.CanGoBack)
{
MyFrame.GoBack();
FinancialListBoxItem.IsSelected = true;
}
}
FrostedGlass
Code
private void initializeFrostedGlass(UIElement glassHost)
{
Visual hostVisual = ElementCompositionPreview.GetElementVisual(glassHost);
Compositor compositor = hostVisual.Compositor;
var glassEffect = new GaussianBlurEffect
{
BlurAmount = 15.0f,
BorderMode = EffectBorderMode.Hard,
Source = new ArithmeticCompositeEffect
{
MultiplyAmount = 0,
Source1Amount = 0.5f,
Source2Amount = 0.5f,
Source1 = new CompositionEffectSourceParameter("backdropBrush"),
Source2 = new ColorSourceEffect
{
Color = Color.FromArgb(255, 245, 245, 245)
}
}
};
var effectFactory = compositor.CreateEffectFactory(glassEffect);
var backdropBrush = compositor.CreateBackdropBrush();
//var backdropBrush = compositor.CreateHostBackdropBrush();
var effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("backdropBrush", backdropBrush);
var glassVisual = compositor.CreateSpriteVisual();
glassVisual.Brush = effectBrush;
ElementCompositionPreview.SetElementChildVisual(glassHost, glassVisual);
var bindSizeAnimation = compositor.CreateExpressionAnimation("hostVisual.Size");
bindSizeAnimation.SetReferenceParameter("hostVisual", hostVisual);
glassVisual.StartAnimation("Size", bindSizeAnimation);
}
or
Theme AcrylicMaterial
Control2
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Margin="20,20,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Text="TimePicker" VerticalAlignment="Center" />
<TimePicker Grid.Row="0"
Grid.Column="1"
ClockIdentifier="12HourClock"
Margin="20,0,0,20" />
<TextBlock Grid.Row="1"
Text="CalendarPicker"
VerticalAlignment="Center"/>
<CalendarDatePicker
Grid.Row="1"
Grid.Column="1"
Margin="20,0,0,20"
PlaceholderText="choose a date" CalendarIdentifier="JapaneseCalendar" />
<TextBlock Grid.Row="2" Text="CalendarView" VerticalAlignment="Center" />
<StackPanel Grid.Row="2"
Grid.Column="1"
Margin="20,0,0,20"
HorizontalAlignment="Left">
<CalendarView Name="MyCalendarView"
SelectionMode="Multiple"
SelectedDatesChanged="MyCalendarView_SelectedDatesChanged" />
<TextBlock Name="CalendarViewResultTextBlock" />
</StackPanel>
<TextBlock Grid.Row="3" Text="Flyout" VerticalAlignment="Center" />
<Button Name="MyFlyoutButton"
Margin="20,0,0,20"
Grid.Row="3"
Grid.Column="1"
Content="Flyout">
<Button.Flyout>
<Flyout x:Name="MyFlyout">
<StackPanel Margin="20,20,20,20">
<TextBlock Text="I just flew out to say I love you." Margin="0,0,0,10" />
<Button Name="InnerFlyoutButton"
HorizontalAlignment="Right"
Content="OK"
Click="InnerFlyoutButton_Click" />
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
<TextBlock Grid.Row="4" Text="FlyoutMenu" VerticalAlignment="Center" />
<Button Grid.Row="4"
Margin="20,0,0,20"
Grid.Column="1"
Content="FlyoutMenu">
<Button.Flyout>
<MenuFlyout Placement="Bottom">
<MenuFlyoutItem Text="Item 1" />
<MenuFlyoutItem Text="Item 2" />
<MenuFlyoutSeparator />
<MenuFlyoutSubItem Text="Item 3">
<MenuFlyoutItem Text="Item 4" />
<MenuFlyoutSubItem Text="Item 5">
<MenuFlyoutItem Text="Item 6" />
<MenuFlyoutItem Text="Item 7" />
</MenuFlyoutSubItem>
</MenuFlyoutSubItem>
<MenuFlyoutSeparator />
<ToggleMenuFlyoutItem Text="Item 8" />
</MenuFlyout>
</Button.Flyout>
</Button>
<!-- You can apply this to anything ... ex. Image: -->
<!-- https://msdn.microsoft.com/en-us/library/windows/apps/xaml/dn308516.aspx -->
<TextBlock Grid.Row="5" Text="AutosuggestBox" VerticalAlignment="Center" />
<AutoSuggestBox Name="MyAutoSuggestBox"
Margin="20,0,0,20"
Grid.Row="5"
Grid.Column="1"
HorizontalAlignment="Left"
QueryIcon="Find"
PlaceholderText="Find Something"
Width="200"
TextChanged="MyAutoSuggestBox_TextChanged" />
<TextBlock Text="Slider" Grid.Row="6" VerticalAlignment="Center" />
<Slider Name="MySlider"
Margin="20,0,0,20"
Grid.Row="6"
Grid.Column="1"
HorizontalAlignment="Left"
Maximum="100"
Minimum="0"
Width="200" />
<TextBlock Grid.Row="7" Text="ProgressBar" VerticalAlignment="Center" />
<ProgressBar Name="MyProgressBar"
Margin="20,0,0,20"
Grid.Row="7"
Grid.Column="1"
HorizontalAlignment="Left"
Width="200"
Maximum="100"
Value="{x:Bind MySlider.Value, Mode=OneWay}" />
<TextBlock Grid.Row="8" Text="Progress Ring" VerticalAlignment="Center" />
<ProgressRing Name="MyProgressRing"
Margin="20,0,0,20"
Grid.Row="8"
Grid.Column="1"
HorizontalAlignment="Left"
Width="50"
Height="50"
IsActive="True" />
</Grid>
</Grid>
Code
private string[] selectionItems = new string[]
{ "Ferdinand", "Frank",
"Frida", "Nigel", "Tag",
"Tanya", "Tanner", "Todd"
};
public MainPage()
{
this.InitializeComponent();
}
private void InnerFlyoutButton_Click(object sender, RoutedEventArgs e)
{
MyFlyout.Hide();
}
private void MyAutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
{
var autoSuggestBox = (AutoSuggestBox)sender;
var filtered = selectionItems.Where(p => p.StartsWith(autoSuggestBox.Text)).ToArray();
autoSuggestBox.ItemsSource = filtered;
}
private void MyCalendarView_SelectedDatesChanged(CalendarView sender, CalendarViewSelectedDatesChangedEventArgs args)
{
var select = sender.SelectedDates.Select
(p => p.Date.Month.ToString() + "/" + p.Date.Day.ToString()).ToArray();
var values = string.Join(",", select);
CalendarViewResultTextBlock.Text = values;
}
