I'm starting to learn a little bit of WPF and Mahapps.metro, so I'm pretty new with those ones; here the question:
I have a button and two textboxes, the textboxes visibility is hidden when the forms loads, so when the user clicks the button, the textboxes visibility will be visible, but I want the textboxes to appear with that "slide" animation of the form load that Mahapps provides with the MetroWindow.
I tried using TransitioningContentControl but I couldn't make it happen. I would really appreciate your help, thanks.
My XAML:
<Controls:MetroWindow x:Class="practicas.nuevo"
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:practicas"
mc:Ignorable="d"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:behaviours="clr-namespace:MahApps.Metro.Behaviours;assembly=MahApps.Metro"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Reporte Nuevo" Height="300" Width="574.444" Loaded="formload">
<Controls:MetroWindow.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Purple.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.AnimatedTabControl.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Controls:MetroWindow.Resources>
<Grid>
<Controls:TransitioningContentControl x:Name="transitioning" Transition="Down"/>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="238,89,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<TextBox x:Name="textBox1" HorizontalAlignment="Left" Height="95" Margin="345,51,0,0" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="211" Controls:TextBoxHelper.Watermark="Hi Im a watermark" Background="#FF7400FF"/>
<TextBox x:Name="textBox2" HorizontalAlignment="Left" Height="95" Margin="0,51,0,0" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="211" Controls:TextBoxHelper.Watermark="Hi im another watermark" Background="#FF7400FF"/>
</Grid>
</Controls:MetroWindow>
EDIT: This method gave me the solution, the only difference is that the control that I used was ContentControl instead of StackPanel, here is my xaml for anyone who wants to make something like this:
P.S: Marked as an answer, thanks man.
<Controls:TransitioningContentControl x:Name="transitioning" Transition="Left">
</Controls:TransitioningContentControl>
<Controls:TransitioningContentControl x:Name="transitioning2" Transition="Up">
</Controls:TransitioningContentControl>
<Controls:TransitioningContentControl x:Name="transitioning3" Transition="Up">
</Controls:TransitioningContentControl>
<ContentControl x:Name="panel" Margin="-10,0,0,0" Visibility="Hidden">
<Canvas x:Name="canvas">
<Label x:Name="label" Content="Reporte Recibido:" Canvas.Left="10" Canvas.Top="41" Width="112"/>
<Label x:Name="label2" Content="Acciones a tomar:" Canvas.Left="600" Canvas.Top="41" Background="{x:Null}" RenderTransformOrigin="0.497,0.551"/>
<Controls:ToggleSwitch x:Name="ToggleSwitch" Style="{StaticResource MahApps.Metro.Styles.ToggleSwitch.Win10}" Canvas.Left="284" Canvas.Top="122" OnLabel="Confirmado" OffLabel="Por Confirmar" RenderTransformOrigin="0.5,0.5" Visibility="Hidden" Width="140" Checked="switched" Unchecked="unswitched" />
<Image x:Name="accion" Height="25" Width="33" Canvas.Left="671" Canvas.Top="218" Source="Imagenes/Add-New.png" MouseDown="accionagregar"/>
<RichTextBox x:Name="RichTextbox1" HorizontalAlignment="Left" Height="154" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="284" Canvas.Left="438" Canvas.Top="64" TextChanged="textchanged" RenderTransformOrigin="0.815,0.541" Background="#FF7400FF" GotFocus="focus">
<xctk:RichTextBoxFormatBarManager.FormatBar >
<xctk:RichTextBoxFormatBar />
</xctk:RichTextBoxFormatBarManager.FormatBar>
<FlowDocument/>
</RichTextBox>
<RichTextBox x:Name="RichTextbox2" Background="#FF7400FF" Canvas.Top="64" GotFocus="reportefocus" Height="154" Width="274" Canvas.Left="5">
<xctk:RichTextBoxFormatBarManager.FormatBar >
<xctk:RichTextBoxFormatBar />
</xctk:RichTextBoxFormatBarManager.FormatBar>
<FlowDocument/>
</RichTextBox>
<Rectangle x:Name="reporteimagen" HorizontalAlignment="Left" Height="100" Margin="83,99,0,0" VerticalAlignment="Top" Width="100">
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_book_open_text}"/>
</Rectangle.Fill>
</Rectangle>
<Rectangle x:Name="accionesimagen" HorizontalAlignment="Left" Height="100" Margin="536,99,0,0" VerticalAlignment="Top" Width="100" >
<Rectangle.Fill>
<VisualBrush Visual="{StaticResource appbar_book_list}"/>
</Rectangle.Fill>
</Rectangle>
<xctk:DateTimePicker x:Name="datetime" Width="162" Canvas.Left="504" Canvas.Top="218" Foreground="White" Format="Custom" FormatString="hh:mm tt" TimeFormat="Custom" TimeFormatString="hh:mm tt" CultureInfo="es-GT" ShowDropDownButton="False" Text="DefaultValue" IsReadOnly="True"/>
<Image x:Name="image7" Height="27" Canvas.Left="697" Canvas.Top="6" Width="33" Source="Imagenes/Repeat-All.png" RenderTransformOrigin="0.471,0.596" ToolTip="Reiniciar" MouseDown="reiniciar" Visibility="Hidden"/>
</Canvas>
</ContentControl>
<ContentControl x:Name="panel2" Visibility="Hidden">
<Canvas>
<Label x:Name="label5" Content="Reporte Creado Por:" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Canvas.Left="18" Canvas.Top="329" Background="{x:Null}" RenderTransformOrigin="0.497,0.551" Width="128"/>
<Label x:Name="label6" Content="Correlativo" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Canvas.Left="305" Canvas.Top="329" Background="{x:Null}" RenderTransformOrigin="0.497,0.551" Width="128"/>
<Label x:Name="label7" Content="Creado En:" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Canvas.Left="592" Canvas.Top="329" Background="{x:Null}" RenderTransformOrigin="0.497,0.551" Width="128"/>
<TextBox x:Name="textBox3" Height="23" HorizontalContentAlignment="Center" Canvas.Left="305" Canvas.Top="355" Width="128" IsReadOnly="True" Controls:TextBoxHelper.Watermark="Se genera al concluir."/>
<TextBox x:Name="textBox4" Height="23" HorizontalContentAlignment="Center" Canvas.Left="18" Canvas.Top="355" Width="128" IsReadOnly="True"/>
<TextBox x:Name="textBox5" Height="23" HorizontalContentAlignment="Center" Canvas.Left="592" Canvas.Top="355" Width="128" IsReadOnly="True"/>
<Image x:Name="image1" Height="44" Canvas.Left="504" Canvas.Top="337" Width="51" Source="Imagenes/Mail-Send.png" MouseDown="enviar" Visibility="Hidden"/>
<Image x:Name="image2" Height="44" Canvas.Left="225" Canvas.Top="337" Width="51" Source="Imagenes/User-Add.png"/>
<Image x:Name="image3" Height="44" Canvas.Left="169" Canvas.Top="337" Width="51" Source="Imagenes/Recycle-Bin.png" MouseDown="cancelar"/>
<Image x:Name="image5" Height="44" Canvas.Left="443" Canvas.Top="337" Width="51" Source="Imagenes/Lock.png"/>
<Image x:Name="image4" Height="44" Canvas.Left="443" Canvas.Top="337" Width="51" Source="Imagenes/Lock-Open.png"/>
</Canvas>
</ContentControl>
Example
You didn't place any content inside the transitioning content control. Try this:
<Grid>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="238,89,0,0" VerticalAlignment="Top" Width="75" Click="button_Click"/>
<Controls:TransitioningContentControl x:Name="transitioning" Transition="Down">
<StackPanel>
<TextBox x:Name="textBox1" HorizontalAlignment="Left" Height="95" Margin="345,51,0,0" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="211" Controls:TextBoxHelper.Watermark="Hi Im a watermark" Background="#FF7400FF"/>
<TextBox x:Name="textBox2" HorizontalAlignment="Left" Height="95" Margin="0,51,0,0" TextWrapping="Wrap" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" VerticalAlignment="Top" Width="211" Controls:TextBoxHelper.Watermark="Hi im another watermark" Background="#FF7400FF"/>
</StackPanel>
</Controls:TransitioningContentControl>
</Grid>
Plus, reading the documentation, you'll see TransitioningContentControl performs the animation when the content changes. So you want to start with empty Transitioning Content Control, and then inside your Button click handler, set TransitioningContentControl Content dynamically to the two textboxes (need to be wrapped inside another control, like StackPanel, because transitioning control can only have a single child content.
Animations in WPF are quite tricky to pull of. I've made a fade animation a while back and it was quite a lot of work. Such a slide animation would require a lot of code and debugging to get it right. My recommendation is use a free slide animation library, and if you are feeling up to the task, you might be able to get a hold of some source code that you can use for inspiration if you want.
Related
Im trying to create a progress bar for one of my computer configuration scripts and I'd like to avoid adding a button or some kind of trigger to the GUI,
The script is powershell and for the GUI XAML:
<Window x:Name="BackUp_MAINWINDOW" x:Class="ProgressBarTest.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:ProgressBarTest"
mc:Ignorable="d"
Title="88%" Height="110" Width="510" Icon="C:\Users\rsosa012\Documents\Scripts\Powershell\ICOs\PwC.ico" ResizeMode="CanMinimize" WindowStartupLocation="CenterScreen" Top="0" FontFamily="Georgia" Margin="0,-1,0,0" FontSize="11" SnapsToDevicePixels="True" BorderThickness="0">
<Window.TaskbarItemInfo>
<TaskbarItemInfo Description="Progress" ProgressState="Indeterminate" ProgressValue="50"/>
</Window.TaskbarItemInfo>
<Grid>
<ProgressBar HorizontalAlignment="Left" Height="17" Margin="10,44,0,0" VerticalAlignment="Top" Width="410" Value="50" Opacity="0.6"/>
<Image HorizontalAlignment="Left" Height="50" Margin="435,10,0,0" VerticalAlignment="Top" Width="50" Source="C:\Users\rsosa012\Documents\Scripts\Powershell\ICOs\PwC.ico"/>
<Label Content="Name: " HorizontalAlignment="Left" Height="20" Margin="10,6,0,0" VerticalAlignment="Top" Width="46" FontFamily="Georgia" Background="{x:Null}" Foreground="Black" FontSize="10" FontWeight="Bold"/>
<Label Content="Items remaining: " HorizontalAlignment="Left" Height="21" Margin="10,19,0,0" VerticalAlignment="Top" Width="110" FontFamily="Georgia" Background="{x:Null}" Foreground="Black" FontSize="10" FontWeight="Bold"/>
<TextBlock HorizontalAlignment="Left" Height="15" Margin="392,28,0,0" TextWrapping="Wrap" Text="88%" VerticalAlignment="Top" Width="28" FontSize="12" Opacity="0.6"/>
<TextBlock HorizontalAlignment="Left" Height="11" Margin="51,12,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="62" FontSize="9"/>
<TextBlock HorizontalAlignment="Left" Height="11" Margin="106,25,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="62" FontSize="9"/>
</Grid>
My question is about the events of these controls, does any of these controls have an event that triggers when the .showdialog() method executes, basically when the window appears?
Thanks in advance.
I have problem with having ScrollViewer working.
This is my MainWindow XAML:
<Window x:Class="Labels.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:Labels"
mc:Ignorable="d"
Title="Labels" Height="350" Width="250" WindowStartupLocation="CenterScreen"
ResizeMode="NoResize" Background="#FFF6A300">
<ScrollViewer VerticalScrollBarVisibility="Hidden" Name="Scroll">
<Grid Margin="0,0,0,0" HorizontalAlignment="Center" Height="auto"
VerticalAlignment="Center" Name="mainGrid">
<Label x:Name="ProductLabel" Content="Product" HorizontalAlignment="Center"
Width="200" FontSize="16"
FontWeight="Bold" VerticalAlignment="Top"
HorizontalContentAlignment="Center" Margin="15,-5,9,0"/>
<TextBox x:Name="ProductTextBox" HorizontalAlignment="Center" Height="28"
Margin="13,22,11,0"
TextWrapping="Wrap" VerticalAlignment="Top" Width="200"
PreviewKeyDown="ProductTextBox_PreviewKeyDown"
SpellCheck.IsEnabled="True" FontSize="16"
HorizontalContentAlignment="Center"/>
<Label x:Name="IndexLabel" Content="Index: " HorizontalAlignment="Left"
Margin="10,50,0,0" VerticalAlignment="Top" Height="35" Width="62"/>
<Label x:Name="NameLabel" Content="Name:" HorizontalAlignment="Left"
Margin="10,80,0,0" VerticalAlignment="Top" Height="31" Width="62"/>
<TextBlock x:Name="IndexTextBlock" HorizontalAlignment="Left"
Margin="58,55,0,0" TextWrapping="Wrap" VerticalAlignment="Top"
Width="156" Height="23"/>
<TextBlock x:Name="NameTextBlock" HorizontalAlignment="Left"
Margin="58,85,0,0" TextWrapping="Wrap" VerticalAlignment="Top"
Width="155" Height="52"/>
<Label x:Name="TypeLabel" Content="Label template:"
HorizontalAlignment="Center" VerticalAlignment="Top" Height="30"
Width="199" FontSize="16" FontWeight="Bold"
Margin="15,142,10,0" HorizontalContentAlignment="Center"/>
<TextBox x:Name="TypeTextBox" HorizontalAlignment="Center"
Height="29" Margin="15,172,9,0" TextWrapping="Wrap"
VerticalAlignment="Top" Width="200"
PreviewKeyDown="TypeTextBox_PreviewKeyDown"
HorizontalContentAlignment="Center" FontSize="16"/>
<Label x:Name="CountLabel" Content="Print Copies: " HorizontalAlignment="Center"
Margin="14,206,10,0"
VerticalAlignment="Top" Height="31" Width="200" FontSize="16"
FontWeight="Bold" HorizontalContentAlignment="Center"/>
<TextBox x:Name="CountTextBox"
PreviewTextInput="CountTextBox_PreviewTextInput"
HorizontalAlignment="Center"
Height="28" Margin="13,232,11,0" TextWrapping="Wrap"
VerticalAlignment="Top" Width="200"
PreviewKeyDown="CountTextBox_PreviewKeyDown"
HorizontalContentAlignment="Center" FontSize="16"/>
<Label x:Name="LogoLabel" Content="Label" HorizontalAlignment="Left"
Margin="93,268,0,-8" VerticalAlignment="Top" Visibility="Hidden"/>
</Grid>
</ScrollViewer>
In code behind, I'm adding TextBox under LogoLabel and then I'm updating ScrollViewer's Layout like this:
mainGrid.Children.Add(nameTxt);
LogoLabel.Visibility = Visibility.Visible;
CountTextBox.IsEnabled = false;
nameTxt.Focus();
Scroll.UpdateLayout();
Scroll.ScrollToVerticalOffset(nameTxt.Margin.Top);
It looks like this:
As you can see on screenshoot uploaded above, I don't know how to make ScrollViewer to scroll that I could see entire LogoTextBox height. How to do it ? Any suggestions ?
You should scroll to a point outside of visible bounds. The Scroll.ScrollToVerticalOffset(nameTxt.Margin.Top) is already visible so no need to scroll.
You can try something like this:
Scroll.ScrollToVerticalOffset(nameTxt.Margin.Top + nameTxt.Height);
By doing this the scroll control will scroll to show the full text box.
The problem is with mainGrid height. It was set to auto. I changed it to static and in code I increase it's height by nameTxt height. And it works.
I have 2 textblocks on my form. I need to have vertical scrollbars in each of them. Due to some reason, I am not able to get the scrollbars on both. Kindly provide me with some idea.
<Grid>
<Button Content="COMPARE" HorizontalAlignment="Left" Margin="216,30,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
<TextBox x:Name="TextBox1" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,69,0,0" TextWrapping="Wrap" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBox1_Loaded" />
<ScrollViewer>
<TextBlock x:Name="TextBlock1" HorizontalAlignment="Left" Margin="10,69,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBlock1_Loaded" />
</ScrollViewer>
<TextBox x:Name="TextBox2" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Auto" HorizontalAlignment="Left" Margin="258,69,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBox2_Loaded"/>
<ScrollViewer>
<TextBlock x:Name="TextBlock2" HorizontalAlignment="Left" Margin="258,69,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-1.351,-2.164" Height="242" Width="226" Loaded="TextBlock2_Loaded_1"/>
</ScrollViewer>
<Button Content="EDIT" HorizontalAlignment="Left" Margin="409,30,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>
<Button Content="HOME" HorizontalAlignment="Left" Margin="21,26,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="0.23,0.986" Click="Button_Click_2"/>
</Grid>
Try to check this out:
1. XAML Code:
<ScrollViewer Grid.Column="0" Grid.Row="0">
<TextBlock x:Name="ATextBlock" ></TextBlock></ScrollViewer>
<ScrollViewer Grid.Row="0" Grid.Column="1" >
<TextBlock x:Name="BtTextBlock" ></TextBlock></ScrollViewer>
the problem was; the Height definition on the TextBlock. Just remove it and that is.
regards.,
To show vertical scroll bar on a TextBox when needed you can use this XAML
<TextBox .... VerticalScrollBarVisibility="Auto" />
ScrollBar will apear when text does not fit the original space given to controll.
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.