I am trying to implement splitview in my app.But when ii set IsPaneOpen = true;
My pivots are not moving to right of that split view pane.Insted SplitView Pane opens Over pivotItems.
Someone please help me to resolve this.
Thanks in advance.
My Main page:
<Page
x:Class="SplitView.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SplitView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<RelativePanel x:Name="myrelativepanel">
<Pivot x:Name="mypivot" RelativePanel.AlignRightWith="spv">
<PivotItem x:Name="header1" Header="Header1">
<ListBox x:Name="listView"
HorizontalAlignment="Left"
Height="Auto"
VerticalAlignment="Top"
Width="172"
ItemsSource="{x:Bind itemsList}"
/>
</PivotItem>
<PivotItem x:Name="header2" Header="Header2">
<ListBox x:Name="listView1"
HorizontalAlignment="Left"
Height="Auto"
VerticalAlignment="Top"
Width="172"
ItemsSource="{x:Bind itemsList}"
/>
</PivotItem>
</Pivot>
<local:SplitViewPage x:Name="spv"></local:SplitViewPage>
</RelativePanel>
</Grid>
</Page>
My SplivView page:
<Page
x:Class="SplitView.SplitViewPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SplitView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<SplitView x:Name="MySplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
CompactPaneLength="50" OpenPaneLength="150">
<SplitView.Pane>
<StackPanel Background="Gray">
<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 1" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 2" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<Button x:Name="MenuButton3" FontFamily="Segoe MDL2 Assets" Content=""
Width="50" Height="50" Background="Transparent"/>
<TextBlock Text="Button 3" FontSize="18" VerticalAlignment="Center" />
</StackPanel>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<Grid>
<TextBlock Text="SplitView Basic" FontSize="54" Foreground="White"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</SplitView.Content>
</SplitView>
</Page>
Use display mode CompactInline, instead of CompactOverlay on your splitview.
DisplayMode="CompactInline"
Related
in this Code window state is maximize and that's fine, but when i run this code
window is on Fullscreen but stackpanel and grid not on full screen.
here is my Code
<Window x:Class="POSApplication.POSSystem"
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:POSApplication"
mc:Ignorable="d"
Title="POS System" Height="600.857" Width="908.571" Background="#04c582" Loaded="OnloadPage" ResizeMode="NoResize" WindowState="Maximized" WindowStyle="None">
<Grid Name="MainGrid" Margin="0,0,-6,0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel HorizontalAlignment="Left" Height="346" Margin="0,68,0,0" VerticalAlignment="Top" Width="171">
<Button Content="Customers" Height="54" FontSize="20" FontWeight="Bold" Name="Customers_Btn" Click="Customers_Btn_Click"/>
<Button Content="Products" Height="54" FontSize="20" FontWeight="Bold" Name="Products_Btn" Click="Products_Btn_Click"/>
<Button Content="Users" Height="54" FontSize="20" FontWeight="Bold" Name="User_Btn" Click="User_Btn_Click"/>
<Button Content="Sale" Height="54" FontSize="20" FontWeight="Bold" Click="Sale_Btn"/>
</StackPanel>
<StackPanel HorizontalAlignment="Left" Height="63" VerticalAlignment="Top" Width="892" Background="#04b550">
<Label Content="POS Sytem" Margin="0,20,0,0" Width="120" Height="40" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center"/>
<Button Content="Log Out" HorizontalAlignment="Left" Margin="770,-40,0,0" VerticalAlignment="Top" Width="100" FontWeight="Bold" Click="LogOut_Button_Click" Height="40" FontSize="20"/>
</StackPanel>
<WrapPanel HorizontalAlignment="Left" Height="440" Margin="176,68,0,0" VerticalAlignment="Top" Width="700" Background="White" Name="main_panel" />
</Grid>
I am trying to accomodate with the new platform, but for some reason, after I ran the application several times, it won't display it's elements. It's just like I add another element and it won't show anything. I've tried deleting everything and starting from scratch, but it does the same thing. Instead of showing at least one element, the app remains blank, even if I change the theme to Dark. The compiler also shows no error. My main page is:
<Page
x:Class="WDRPCIV.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WDRPCIV"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationForegroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel>
<Button Width="40" Height="40" Background="{ThemeResource SystemControlForegroundAccentBrush}" Name="RootHamburger" FontFamily="Segoe MDL2 Assets" Content="" FontSize="20" Click="EvenimentMeniu"/>
<TextBlock x:Name="textBlock" Text="YOLOSWAG" FontSize="16" Margin="50,13,0,0"/>
</RelativePanel>
<SplitView Name="ListaNavigare" Grid.Row="1" DisplayMode="CompactOverlay" OpenPaneLength="200" CompactPaneLength="40" HorizontalAlignment="Left">
<SplitView.Pane>
<ListBox SelectionMode="Single" Name="Iconite" SelectionChanged="SchimbareFereastra">
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="18" Text=""></TextBlock>
<TextBlock Text="Selectare Categorie" FontSize="14" Margin="20,0,0,0"></TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="18" Text=""></TextBlock>
<TextBlock Text="Incepere Chestionar" FontSize="14" Margin="20,0,0,0"></TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal" GotFocus="StackPanel_GotFocus">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="18" Text=""></TextBlock>
<TextBlock Text="Despre" FontSize="14" Margin="20,0,0,0"></TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
</SplitView>
</Grid>
The app remains Blank since your Background is Black and your Font Foreground is also Black. Secondly to better make use of Splitview you need to do two things first on Hamburger click you need to open splitview panel if it was closed along with defining your Content under Splitview.Content.
Here's the updated XAML copy and paste and you will find the difference.
<Grid Background="{ThemeResource ApplicationForegroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel>
<Button Width="40" Height="40" Background="{ThemeResource SystemControlForegroundAccentBrush}" Name="RootHamburger" FontFamily="Segoe MDL2 Assets" Content="" FontSize="20" Click="EvenimentMeniu"/>
<TextBlock x:Name="textBlock" Text="YOLOSWAG" Foreground="White" FontSize="16" Margin="50,13,0,0"/>
</RelativePanel>
<SplitView Name="ListaNavigare" Grid.Row="1" DisplayMode="CompactOverlay" OpenPaneLength="200" CompactPaneLength="40" HorizontalAlignment="Left">
<SplitView.Pane>
<ListBox SelectionMode="Single" Name="Iconite" >
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="18" Text=""></TextBlock>
<TextBlock Text="Selectare Categorie" FontSize="14" Margin="20,0,0,0"></TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="18" Text=""></TextBlock>
<TextBlock Text="Incepere Chestionar" FontSize="14" Margin="20,0,0,0"></TextBlock>
</StackPanel>
</ListBoxItem>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<TextBlock FontFamily="Segoe MDL2 Assets" FontSize="18" Text=""></TextBlock>
<TextBlock Text="Despre" FontSize="14" Margin="20,0,0,0"></TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
</SplitView.Pane>
<SplitView.Content>
<Grid Background="Green" Width="550" >
<TextBlock Text="Your Content"/>
</Grid>
</SplitView.Content>
</SplitView>
</Grid>
Also make sure on inside your click event of hamburger button you have added code to open pane.
private void EvenimentMeniu(object sender, RoutedEventArgs e)
{
ListaNavigare.IsPaneOpen = true;
}
I have a listBox with a checkbox I want to manage the alignment through setting the vertical alignment.
I have seen several solution here e.g. set verticalContentAlignment or verticalAlignment to top but that didn't work.
I've also seen some setting a style but couldn't manage to make it done.
What I'd like is to know WHY the ONLY element is down there. I can't understand why it's stuck in the middle.
Here's my code:
<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.8,0" >
<CheckBox x:Name="cbEasyRunManagesPcDmis" Margin="20" Content="EasyRun Manages PC-DMIS" HorizontalAlignment="Left" VerticalAlignment="Top" Click="cbTouchScreen_Click" />
</ListBox>
thanx for any help
Patrick
--- EDIT ---
As requested by Frisbee here is the complete xaml. Sorry for its length:
<Base:WindowViewBase x:Class="EasyRun.Views.MainView.MainView"
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"
mc:Ignorable="d"
xmlns:Base="clr-namespace:Cannoli.Base;assembly=Cannoli"
xmlns:design="clr-namespace:EasyRun.Views.MainView.Design"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:System="clr-namespace:System;assembly=mscorlib"
xmlns:CannoliBorderlessWindow="clr-namespace:CannoliBorderlessWindow;assembly=Cannoli.BorderlessWindow"
d:DesignWidth="212.32" d:DesignHeight="109.92"
Title="EASY RUN 2.0" Height="600" Width="900" MinWidth="500" FontFamily="/EasyRun2.0;component/Resources/Fonts/#FontAwesome" Icon="/EasyRun2.0;component/Resources/Images/Lightning.png"
>
<d:WindowViewBase.DataContext>
<design:DesignMainViewModel />
</d:WindowViewBase.DataContext>
<i:Interaction.Behaviors>
<CannoliBorderlessWindow:CannoliBorderlessWindowBehavior/>
</i:Interaction.Behaviors>
<!-- RISORSE GLOBALI: VARIABILI -->
<Window.Resources>
<System:Double x:Key="BUTTON_HEIGHT">50</System:Double>
<System:Double x:Key="BUTTON_FONTSIZE">20</System:Double>
</Window.Resources>
<Grid x:Name="MainGrid">
<Grid.Background>
<ImageBrush ImageSource="/EasyRun2.0;component/Resources/Images/gradientWallpaper.jpg"/>
</Grid.Background>
<TextBlock Text="{Binding WelcomeMessage}" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Margin="428,128,99.6,228"/>
<StackPanel Orientation="Vertical" VerticalAlignment="Bottom" Margin="0,0,0,20">
</StackPanel>
<TabControl TabStripPlacement="Left" Margin="0,0,-0.4,0" Background="{x:Null}">
<!-- +++++++++++++ TAB1 ++++++++++++ -->
<TabItem Name="tabItem1" HorizontalAlignment="Center" Height="80" FontSize="50" Background="{x:Null}" VerticalAlignment="Top" >
<TabItem.Header>
<StackPanel>
<TextBlock HorizontalAlignment="Center" Text=""/>
<TextBlock Name="tbTab1" HorizontalAlignment="Center" Visibility="Hidden" FontSize="20"/>
</StackPanel>
</TabItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Border1Tab1" BorderBrush="Gainsboro" BorderThickness="5" Width="200" CornerRadius="8,8,3,3" Margin="10,10,10,10.4" >
<ListBox x:Name="lbButtons1" Background="{x:Null}" BorderBrush="{x:Null}" Margin="10,10,10,10" />
</Border>
<Border x:Name="Border2Tab1" BorderBrush="Gainsboro" MinWidth="100" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="1" Margin="10,10,9.2,10" />
</Grid>
</TabItem>
<!-- +++++++++++++ TAB2 ++++++++++++ -->
<TabItem Name="tabItem2" HorizontalAlignment="Center" Height="80" FontSize="50">
<TabItem.Header>
<StackPanel>
<TextBlock Text=""/>
<TextBlock Name="tbTab2" Visibility="Hidden" FontSize="20"/>
</StackPanel>
</TabItem.Header>
<TabItem.Background>
<ImageBrush/>
</TabItem.Background>
</TabItem>
<!-- +++++++++++++ TAB3 ++++++++++++ -->
<TabItem Name="tabItem3" HorizontalAlignment="Center" Height="80" FontSize="50" Background="{x:Null}" >
<TabItem.Header>
<StackPanel>
<TextBlock Text="" HorizontalAlignment="Center" />
<TextBlock Name="tbTab3" Visibility="Hidden" FontSize="20"/>
</StackPanel>
</TabItem.Header>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border x:Name="Border1Tab3" BorderBrush="Gainsboro" BorderThickness="5" Width="200" CornerRadius="8,8,3,3" Margin="10,10,10,10" >
<ListBox x:Name="lbButtons3" FontSize="{StaticResource BUTTON_FONTSIZE}" HorizontalContentAlignment="Stretch" Background="{x:Null}" BorderBrush="{x:Null}" >
<Button Name="bt1Tab3" Background="{x:Null}" Content="1" Click="Button_Click" />
<Button Name="bt2Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="2" Click="Button_Click"/>
<Button Name="bt3Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="3" Click="Button_Click"/>
<Button Name="bt4Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="4" Click="Button_Click"/>
<Button Name="bt5Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="5" Click="Button_Click"/>
<Button Name="bt6Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="6" Click="Button_Click"/>
<Button Name="bt7Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="7" Click="Button_Click"/>
<Button Name="bt8Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}" Content="8" Click="Button_Click"/>
</ListBox>
</Border>
<Border x:Name="Border2Tab3" BorderBrush="Gainsboro" MinWidth="100" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="1" Margin="10,10,10,10" >
<StackPanel >
<ListBox x:Name="lb1Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="lbLanguage" Margin="20" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" TextAlignment="Center" Grid.Row="1"><Run Text="Language"/></TextBlock>
<ComboBox x:Name="cmbLanguages" Margin="20" HorizontalAlignment="Left" VerticalAlignment="Center" Width="246" Height="35" DropDownClosed="cmbLanguages_DropDownClosed"/>
</StackPanel>
<CheckBox x:Name="cbTouchScreen" Margin="20" Content="Use touch screen" HorizontalAlignment="Left" VerticalAlignment="Top" Click="cbTouchScreen_Click" />
<CheckBox x:Name="cbEnableImages" Margin="20" Content="Enable Images" HorizontalAlignment="Left" VerticalAlignment="Top" />
<StackPanel Name="spImageDimension" Orientation="Horizontal">
<TextBlock x:Name="lbImageDimension" Margin="20" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" TextAlignment="Center"><Run Text="Image dimension"/></TextBlock>
<ComboBox x:Name="cmbImageDimension" Margin="20" Text="250 px" HorizontalAlignment="Left" DropDownClosed="cmbImageDimension_DropDownClosed" VerticalAlignment="Center" Width="246" Height="35" IsEditable="True">
<TextBlock ><Run Text="50 px"/></TextBlock>
<TextBlock ><Run Text="100 px"/></TextBlock>
<TextBlock ><Run Text="150 px"/></TextBlock>
<TextBlock ><Run Text="200 px"/></TextBlock>
<TextBlock ><Run Text="250 px"/></TextBlock>
</ComboBox>
</StackPanel>
</ListBox>
<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Top" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.8,0" >
<CheckBox x:Name="cbEasyRunManagesPcDmis" Margin="20" Content="EasyRun Manages PC-DMIS" HorizontalAlignment="Left" VerticalAlignment="Top" Click="cbTouchScreen_Click" />
</ListBox>
<ListBox x:Name="lb3Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" />
<ListBox x:Name="lb4Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb5Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb6Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb7Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
<ListBox x:Name="lb8Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}" Margin="0,0,0.4,0" d:IsHidden="True" >
</ListBox>
</StackPanel>
</Border>
</Grid>
</TabItem>
</TabControl>
</Grid>
You need to align the ListBox
<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Top"
If that does not work then post more of your XAML
So the problem was related with the fact that there are several listBox one on top of the other. I thought that making them hidden was enough but when I painted the second listBox in black I saw that it was not starting from the top (see image).
So the solution was to set Visibility = Collapsed for all the listbox that are not in use.
Thanks to kirotab for putting me on the right path. Not sure if I can vote your comment.
I have a problem with WPF... it's kinda odd.
I recently migrated to using MahApps.Metro for my window and when I'm on my Login Screen it flickers between cleartype and non-cleartype every few seconds
Here are my XAML files
MainWindow.xaml
<Controls:MetroWindow x:Class="LegendaryClient.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Title="LegendaryClient" Height="600" Width="1024" MinHeight="600" MinWidth="1024"
ShowIconOnTitleBar="True" SaveWindowPosition="True" Icon="Icon.ico" ResizeMode="CanResizeWithGrip" TitleCaps="False">
<Controls:MetroWindow.WindowCommands>
<Controls:WindowCommands>
<Button Content="settings" />
<Button x:Name="ThemeButton" Click="ThemeButton_Click" Content="theme"/>
</Controls:WindowCommands>
</Controls:MetroWindow.WindowCommands>
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colours.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="Controls/Steel.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid>
<ContentControl x:Name="Container" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</Controls:MetroWindow>
and
<Page x:Class="LegendaryClient.Windows.LoginPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
mc:Ignorable="d"
d:DesignHeight="672" d:DesignWidth="1024"
Title="LoginPage">
<Grid Background="Black" Margin="0">
<Image x:Name="LoginImage" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="UniformToFill" Panel.ZIndex="-2" />
<Label x:Name="WelcomeLabel" Content="Login to League of Legends" HorizontalAlignment="Left" VerticalAlignment="Bottom" FontSize="24" FontWeight="Bold" Foreground="White" Margin="25,0,0,290">
<Label.Effect>
<DropShadowEffect ShadowDepth="3"/>
</Label.Effect>
</Label>
<Grid HorizontalAlignment="Left" Height="230" VerticalAlignment="Bottom" Width="350" Margin="20,0,0,50">
<Grid x:Name="LoginGrid" HorizontalAlignment="Left" Height="230" VerticalAlignment="Top" Width="350">
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Username" VerticalAlignment="Top" Foreground="White" Margin="10,10,0,0" FontSize="18" FontWeight="Bold"/>
<TextBox x:Name="LoginUsernameBox" TextWrapping="NoWrap" VerticalAlignment="Top" Width="330" HorizontalAlignment="Left" Margin="10,40,0,0" FontSize="16"/>
<CheckBox x:Name="RememberUsernameCheckbox" Content="Remember Username" HorizontalAlignment="Right" Margin="0,80,10,0" VerticalAlignment="Top" Foreground="White" IsChecked="True"/>
<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Password" VerticalAlignment="Top" Foreground="White" Margin="10,90,0,0" FontSize="18" FontWeight="Bold"/>
<PasswordBox x:Name="LoginPasswordBox" VerticalAlignment="Top" Width="330" HorizontalAlignment="Left" Margin="10,120,0,0" FontSize="16"/>
<CheckBox x:Name="RememberPasswordCheckbox" Content="Remember Password" HorizontalAlignment="Right" Margin="0,160,10,0" VerticalAlignment="Top" Foreground="White" />
<Button x:Name="LoginButton" Content="Login" HorizontalAlignment="Stretch" Margin="10,180,10,0" VerticalAlignment="Top" Height="41" Click="LoginButton_Click" IsDefault="True" />
<ComboBox x:Name="RegionComboBox" ItemsSource="{DynamicResource Regions}" HorizontalAlignment="Left" Margin="220,10,0,0" VerticalAlignment="Top" Width="120" SelectedIndex="5"/>
</Grid>
<Controls:ProgressRing x:Name="LoggingInProgressRing" IsActive="True" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10,0,0" Visibility="Hidden"/>
<Label x:Name="LoggingInLabel" Content="Logging in..." HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="36" FontWeight="Bold" Foreground="White" Visibility="Hidden"/>
<Grid.Effect>
<DropShadowEffect/>
</Grid.Effect>
</Grid>
<TextBox x:Name="ErrorTextBox" Text="Error" HorizontalAlignment="Left" VerticalAlignment="Bottom" TextWrapping="NoWrap" IsReadOnly="True" Width="350" Height="20" FontSize="12" FontWeight="999" Foreground="#FFFF7373" Margin="25,0,0,15" Background="{x:Null}" Panel.ZIndex="-1" BorderBrush="{x:Null}" Visibility="Hidden">
<TextBox.Effect>
<DropShadowEffect ShadowDepth="3"/>
</TextBox.Effect>
</TextBox>
</Grid>
</Page>
Any help would be appreciated.
Thanks!
Turns out <Controls:ProgressRing x:Name="LoggingInProgressRing" IsActive="True" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,10,0,0" Visibility="Hidden"/> was causing my text to flicker for some reason... Putting it outside the grid stopped the blurring
I'm new in WPF and I'm trying to show an image in a WPF windows, and then show a button, and two links in a absulute coordinate. I have two problems:
The floating controls are moved from one computer to other
The image is blurred. I think that is being resized.
The form must be a fixed dialog, and the image size is 800x560.
Here is my code:
<Window
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" mc:Ignorable="d" x:Class="A.B.C.IntroGuideWindow"
Title="Intro guide" Icon="../Resources/app_icon.ico"
Background="{DynamicResource DialogBackgroundBrush}" ResizeMode="NoResize" WindowStartupLocation="CenterScreen"
WindowStyle="None"
Style="{DynamicResource WindowStyle}" SnapsToDevicePixels="True" TextOptions.TextFormattingMode="Display" Width="830" Height="660">
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../ResourceDictionaries/Colors.xaml"/>
<ResourceDictionary Source="../ResourceDictionaries/BasicStyles/StandardWindowStyle.xaml"/>
<ResourceDictionary Source="../ResourceDictionaries/ButtonStyles/ActionFlatButtonStyle.xaml"/>
<ResourceDictionary Source="../ResourceDictionaries/ButtonStyles/CancelButtonStyle.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="22"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="10,10,10,10" FontFamily="Segoe UI" FontSize="21"
FontWeight="SemiBold" Foreground="{DynamicResource FontBrush}" Grid.Row="0">
<Run Text="Intro guide" />
</TextBlock>
<Button x:Name="closeButton" Style="{DynamicResource CloseChromeButtonStyle}"
Click="CancelButton_Click" Grid.Row="0"
Content="r" HorizontalAlignment="Right" Margin="0,6,6,0" FontFamily="Webdings" IsTabStop="False" />
<Image x:Name="CurrentImage" Grid.Row="1" Width="800" Height="560" Stretch="None" Source="Images/sm-eval-guide-09.png" SnapsToDevicePixels="True"/>
<Button x:Name="OpenSamplesButton" Content="Click here to open the samples directory" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}"
Margin="256,115,265,434" Width="301" Height="23" Click="OpenSamplesButton_Click" Grid.Row="1"/>
<TextBlock x:Name="DocumentationLink" Margin="2,221,-2,333" Grid.Row="1" TextAlignment="Center" VerticalAlignment="Center" FontFamily="Arial" FontSize="14" FontWeight="Bold">
<Hyperlink Foreground="#00A586" NavigateUri="http://www.example.com/#documentation">http://www.example.com/#documentation</Hyperlink>
</TextBlock>
<TextBlock x:Name="TwitterLink" Margin="590,415,84,137" Grid.Row="1" VerticalAlignment="Center" FontFamily="Arial" FontSize="16" FontWeight="Bold">
<Hyperlink Foreground="#00A586" NavigateUri="https://twitter.com/xxx">#xxx</Hyperlink>
</TextBlock>
<Grid VerticalAlignment="Top" Grid.Row="2">
<Button x:Name="PreviousButton" Content="Previous" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}"
Margin="0,0,200,10" Width="90" HorizontalAlignment="Right" Click="PreviousButton_Click"/>
<Button x:Name="NextButton" Content="Next" IsDefault="True"
Style="{DynamicResource ActionFlatButtonStyle}"
Margin="0,0,105,10" Width="90" HorizontalAlignment="Right" Click="NextButton_Click"/>
<Button x:Name="CloseButton" Content="Close" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}"
Margin="0,0,10,10" Width="90"
VerticalAlignment="Bottom" HorizontalAlignment="Right" Click="CloseButton_Click"/>
<CheckBox x:Name="DontShowAgainCheckbox" Content="Don't show this window again." HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Checked="DontShowAgainCheckbox_Checked"/>
</Grid>
</Grid>
</Window>
WPF adjusts for pixel density of the monitor it is running on. Consider using Grid Columns or other layout controls such as StackPanel instead of Margin offsets. For example, your buttons could use the following layout:
<StackPanel Orientation="Horizontal" Margin="10,0" HorizontalAlignment="Right">
<Button x:Name="PreviousButton" Content="Previous" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}" Margin="4,0"
Width="90" Click="PreviousButton_Click"/>
<Button x:Name="NextButton" Content="Next" IsDefault="True"
Style="{DynamicResource ActionFlatButtonStyle}" Margin="4,0"
Width="90" Click="NextButton_Click"/>
<Button x:Name="CloseButton" Content="Close" IsDefault="False"
Style="{DynamicResource ActionFlatButtonStyle}" Margin="4,0"
Width="90" Click="CloseButton_Click"/>
</StackPanel>
For the blurred image, try using UseLayoutRounding="False" in your Image definition.