I have a simple application I'm trying to make.
The idea is to start with a login screen and then move to an admin screen. For this, after looking for answers I stumbled upon Frames and Pages. The problem that I'm having now is that it seems that Pages are not compatible with translucency?
This is what I get when using Frame and Page:
This is what I want to replicate:
This is the main window with pages:
<Window
x:Class="Membership2.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:Membership2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1366"
AllowsTransparency="True" WindowStyle="None" Background="Transparent"
WindowStartupLocation="CenterScreen">
<Grid>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden"/>
</Grid>
</Window>
As you can see, Background property is set to Transparent, but it does nothing. I also tried setting the Grid Background and Frame Background to Transparent without success.
Also, WindowStartupLocation is set to CenterScreen when using Pages, but it also does nothing it seems.
EDIT:
So this problem arises when StartupUri (in App.xaml) is set to my LoginPage.xaml instead of the MainWindow.xaml (described previously).
This is my LoginPage.xaml:
<Page x:Class="Membership2.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:local="clr-namespace:Membership2"
mc:Ignorable="d"
d:DesignHeight="550" d:DesignWidth="450"
MaxHeight="550" MaxWidth="450"
Title="LoginPage"
RenderOptions.ClearTypeHint="Enabled"
FontFamily="./Resources/Fonts/#Dosis"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"
ShowsNavigationUI="False"
Background="Transparent"
>
<Grid
fw:PointerTracker.Enabled="True" Background="Transparent">
<Border
Background="WhiteSmoke"
CornerRadius="7"
Margin="30, 75, 30, 0">
</Border>
<Ellipse
Width="50"
Height="50"
Fill="WhiteSmoke"
Margin="0,-450,0,0">
</Ellipse>
<materialDesign:PackIcon
Kind="AccountCircle"
Width="150"
Height="150"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Grid.RowSpan="2"
FontSize="50"
Foreground="#7ea4b3"
Grid.Column="1">
</materialDesign:PackIcon>
<Label
Content="Administración"
HorizontalAlignment="Center"
Margin="0,140,0,0"
FontSize="30"
FontFamily="./Resources/Fonts/#Dosis">
</Label>
<TextBox
x:Name="Username"
Width="230"
Height="45"
FontSize="25"
TextWrapping="NoWrap"
Style="{StaticResource MaterialDesignTextBox}"
FontWeight="Light"
RenderOptions.ClearTypeHint="Enabled"
FontFamily="./Resources/Fonts/#Dosis"
Margin="0, 0, 0, 50"
materialDesign:HintAssist.Hint="Usuario">
</TextBox>
<PasswordBox
x:Name="Password"
Width="230"
Height="45"
FontSize="25"
FontWeight="Light"
RenderOptions.ClearTypeHint="Enabled"
Margin="0, 150, 0, 0"
BorderThickness="0,0,0,1"
materialDesign:HintAssist.Hint="Contraseña"
materialDesign:TextFieldAssist.DecorationVisibility="Visible">
</PasswordBox>
<Button
x:Name="Login"
Width="150"
Height="48"
VerticalAlignment="Bottom"
Margin="0,0,0,70"
FontSize="25"
FontWeight="Light"
Background="LightGray"
Style="{StaticResource ButtonRevealStyle}"
BorderThickness="2,2,2,2">
Ingresar
</Button>
</Grid>
</Page>
Related
I want to change the design of the buttons of the windows window and the rectangle that contains them: I would like the rectangle to be filled by my background, and to be able to change the design of the buttons
I want to remove the possibility for the user to change the size of the window, and to make it bigger, and I want to remove the Maximize button from the controls
I want to change the design of the hide button and the close button
And for the rectangle that contains the controls I would like it to be filled with my background, then I will add some pixels of thickness to the window in black to add contrast to the window
I tried different things proposed by the lib unfortunately nothing worked
Here is my code
MainWindow.axaml :
<Window xmlns="https://github.com/avaloniaui"
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" d:DesignWidth="800" d:DesignHeight="450"
x:Class="AvaloniaAppTest.MainWindow"
Height="600"
Width="900"
Icon="/assets/icon.ico"
Title="AppTest">
<Window.Background>
<ImageBrush Source="/assets/background.png"/>
</Window.Background>
<Grid>
<Grid.Background>
<ImageBrush Stretch="UniformToFill" Source="/assets/background.png"/>
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Left Side -->
<StackPanel Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Left Click" FontWeight="Bold" FontSize="20" Foreground="White"/>
<Button x:Name="leftStart" Content="Start" Margin="5" Background="Yellow"/>
<Button x:Name="leftStop" Content="Stop" Margin="5" Background="Yellow"/>
<Button x:Name="leftHotkey" Content="Hotkey" Margin="5" Background="Yellow"/>
</StackPanel>
<!-- Right Side -->
<StackPanel Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock Text="Right Click" FontWeight="Bold" FontSize="20" Foreground="White"/>
<Button Content="Start" Margin="5" Background="Yellow"/>
<Button Content="Stop" Margin="5" Background="Yellow"/>
<Button Content="Hotkey" Margin="5" Background="Yellow"/>
</StackPanel>
</Grid>
I'm brand new WPF so I may be missing something obvious. I've got a TextBox in the designer, that looks fine and is visible, however, when running the app it isn't visible while the other elements are still visible.
Designer:
Application:
Xaml:
<Window x:Class="Windows.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:Windows"
mc:Ignorable="d"
Title="UniPaste for Windows" Height="450" Width="800"
Background="#333">
<Grid>
<TextBlock TextWrapping="Wrap" Text="UniPaste for Windows" Margin="0,0,0,348" TextAlignment="Center" VerticalAlignment="Center" Foreground="White" FontSize="32" FontFamily="Consolas Bold"/>
<TextBlock TextWrapping="Wrap" Text="Email" Margin="0,90,0,0" TextAlignment="Center" VerticalAlignment="Top" Foreground="White" FontSize="24" FontFamily="Consolas"/>
<TextBox Name="Email" Margin="340,123,340,290" Background="White" Height="23" TextChanged="EmailChanged"/>
</Grid>
</Window>
Take advantage of the Grid component and its row and column definitions to align the elements you want.
What was happening is that at runtime the textbox had no line to attach to
<Window x:Class="WpfApp1.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:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800"
Background="#333">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0"
Margin="0 25 0 0"
TextWrapping="Wrap"
Text="UniPaste for Windows"
TextAlignment="Center"
VerticalAlignment="Center"
Foreground="White"
FontSize="32"
FontFamily="Consolas Bold"
/>
<TextBlock Grid.Row="1"
Margin="0 25 0 0"
TextWrapping="Wrap"
Text="Email"
TextAlignment="Center"
VerticalAlignment="Top"
Foreground="White"
FontSize="24"
FontFamily="Consolas"/>
<TextBox Grid.Row="2"
Name="Email"
Margin="0 25 0 0"
HorizontalAlignment="Center"
Background="White"
Height="23" Width="100"
TextChanged="EmailChanged"
/>
</Grid>
Runtime Window
First of all, thank you for taking your time to read this.
Im pretty new to WPF and especially to using MahApps - http://mahapps.com
Im having problems switching between pages that I have created using MahApps in my window.
Here is my starting window (MainWindow):
<Window
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"
xmlns:Dialogs="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro" x:Class="WpfApplication.MainWindow"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
Dialog:DialogParticipation.Register="{Binding}"
Title="MainWindow"
Height="600"
Width="800">
<Grid>
<Frame x:Name="Main"/>
</Grid>
Here is the page that I want to move to (I created a frame in the main so I could put the content of this page on it):
<Controls:MetroWindow
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"
xmlns:Dialogs="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro" x:Class="WpfApplication.MainMenu"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
Dialog:DialogParticipation.Register="{Binding}"
Title="MainMenu"
Height="600"
Width="800" NonActiveBorderBrush="#FFC32C2C">
<Grid>
<Image x:Name="Background" Source="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/teaserBackground.jpg" Stretch="UniformToFill">
<Image.BitmapEffect>
<BlurBitmapEffect Radius="17" />
</Image.BitmapEffect>
</Image>
<Image x:Name="Logo" Source="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/Trivia.png" Margin="0,60,0,320" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<TextBox x:Name="Username" Controls:TextBoxHelper.Watermark=" USERNAME" Margin="0,308,0,226" Width="200" Height="35" TextAlignment="Justify" FontSize="20" FontWeight="Bold" HorizontalAlignment="Center" />
<TextBox x:Name="Password" Controls:TextBoxHelper.Watermark=" PASSWORD" Margin="0,378,0,156" Width="200" Height="35" TextAlignment="Justify" FontSize="20" FontWeight="Bold" />
<Button x:Name="SignIn" Content="" HorizontalAlignment="Left" Margin="407,435,0,0" VerticalAlignment="Top" Width="80" Style="{DynamicResource MetroCircleButtonStyle}" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignIn_Click">
<Button.Background>
<ImageBrush ImageSource="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/signIn.png"/>
</Button.Background>
</Button>
<Button x:Name="SignUp" Content="" HorizontalAlignment="Left" Margin="310,435,0,0" VerticalAlignment="Top" Width="80" Style="{DynamicResource MetroCircleButtonStyle}" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignUp_Click">
<Button.Background>
<ImageBrush ImageSource="C:\Users\User\Desktop\Iddo Work\C#Learning\WpfApplication/sign-add-icon.png"/>
</Button.Background>
</Button>
</Grid>
Thank you in advance!
Updated answer:
Frames themselves are meant to load pages and your menu item is inheriting from a window so that will never work.
Here are the mods you need to make:
In your MainWindow.xaml change the Window tag to Controls:MetroWindow (like you have in your MainMenu xaml
In your MainWindow.xaml.cs remove the base class reference for the MainWindow (MainWindow : Window becomes just MainWindow)
In your MainMenu.xaml change Controls:MetroWindow to just UserControl
Back in your MainWindow.xaml, add a ref to your namespace xmlns:my="clr-namespace:WhateverHere"
In MainWindow.xaml, remove the and add your control directly instead
MainWindow.xaml
<Controls:MetroWindow x:Class="WPFDeleteMe.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"
xmlns:Dialogs="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
xmlns:Dialog="clr-namespace:MahApps.Metro.Controls.Dialogs;assembly=MahApps.Metro"
xmlns:my="clr-namespace:WPFDeleteMe"
Title="MainWindow" Height="700" Width="900">
<Grid x:Name="RootGrid">
<my:MainMenu></my:MainMenu>
</Grid>
</Controls:MetroWindow>
MainWindow.xaml.cs
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
}
}
MainMenu.xaml
<UserControl x:Class="WPFDeleteMe.MainMenu"
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"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="800">
<Grid>
<Image x:Name="Background" Source="d:\images\doll-161405_960_720.png" Stretch="UniformToFill">
<Image.BitmapEffect>
<BlurBitmapEffect Radius="17" />
</Image.BitmapEffect>
</Image>
<Image x:Name="Logo" Source="d:\images\Carestream_Solutions.gif" Margin="0,0,0,0" Width="150" Height="40" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<Button x:Name="SignIn" Content="" HorizontalAlignment="Left" Margin="407,435,0,0" VerticalAlignment="Top" Width="80" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignIn_Click">
<Button.Background>
<ImageBrush ImageSource="d:\images\war_kitten.jpg"/>
</Button.Background>
</Button>
<Button x:Name="SignUp" Content="" HorizontalAlignment="Left" Margin="310,435,0,0" VerticalAlignment="Top" Width="80" Height="80" BorderBrush="{x:Null}" Foreground="{x:Null}" Click="SignUp_Click">
<Button.Background>
<ImageBrush ImageSource="d:\images\war_kitten.jpg"/>
</Button.Background>
</Button>
</Grid>
</UserControl>
Am newbie to wpf development.In my wpf app i used user control.what i need is in runtime how can resize the user control,
Please help me to find solution,if my approach is wrong please guide me to get solution,
My XAML code is
<UserControl x:Class="test.pad"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" Focusable="True" OverridesDefaultStyle="False">
<Grid Width="102" Height="123" Name="Grid1" MouseMove="Grid1_MouseMove" MouseUp="Grid1_MouseUp" MouseDown="Grid1_MouseDown">
<Grid.RenderTransform>
<TranslateTransform x:Name="tt"/>
</Grid.RenderTransform>
<Border BorderBrush="Silver" BorderThickness="2">
<Canvas Height="120" HorizontalAlignment="Left" Margin="0,1,0,0" Name="canvas1" VerticalAlignment="Top" Width="100" Grid.ColumnSpan="2">
<RichTextBox Height="98" HorizontalAlignment="Left" Margin="0,24,0,0" Name="richTextBox1" VerticalAlignment="Top" Width="100" BorderThickness="2" Grid.ColumnSpan="2" Background="#FFFF96D8" Canvas.Top="-3" Canvas.Left="-1" />
<Button BorderBrush="#FFFF96D8" Canvas.Left="46" Canvas.Top="-2" Height="23" Name="close" Width="27">
</Button>
<Button Height="23" Name="minimise" Width="27" BorderBrush="#FFFF96D8" Click="button1_Click" Canvas.Left="72" Canvas.Top="-2" ClipToBounds="False" IsEnabled="True" IsHitTestVisible="True" OverridesDefaultStyle="False" ForceCursor="False" Foreground="Black" MouseMove="button1_MouseEnter" MouseLeave="button1_MouseLeave">
</Canvas>
</Border>
</Grid>
</UserControl>
thanks
ash
Remove the Height and Width of the UserControl and also the Grid.
Set the Margin or Size Property for UserControl where you call it.
Here's how looks like when idle:
And here it is, when I tap on it, when it should be popping the full screen selection mode (according to what I've read):
As you can see, it doesn't seem to be opening the full screen selection mode.
Here is my XAML:
<phone:PhoneApplicationPage
x:Class="GameLense.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<Grid>
<Grid.Resources>
<DataTemplate x:Name="PickerItemTemplate">
<StackPanel Orientation="Horizontal">
<Border Background="Transparent" Width="34" Height="34">
<Image Source="{Binding ImagePath}" Margin="12 0 0 0"
VerticalAlignment="Center"
HorizontalAlignment="Center"
Stretch="Fill"/>
</Border>
<TextBlock Text="{Binding Name}" Margin="12 0 0 0"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Name="PickerFullModeItemTemplate">
<StackPanel Orientation="Horizontal">
<Border Background="Gold" Width="34" Height="34">
<Image Source="{Binding ImagePath}" Margin="12 0 0 0" VerticalAlignment="Center" HorizontalAlignment="Center" />
</Border>
<TextBlock Text="{Binding Name}" Margin="12 0 0 0"/>
</StackPanel>
</DataTemplate>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition />
</Grid.RowDefinitions>
<!--Begin Top Bar -->
<Image Grid.Row="0" Source="Images/topbarBg.png" Stretch="Fill" />
<TextBlock Text="Console" HorizontalAlignment="Left"
VerticalAlignment="Center" FontSize="35"
Padding="10"/>
<toolkit:ListPicker x:Name="lstPlatform"
ListPickerMode="Full"
Grid.Row="0" CacheMode="BitmapCache"
Margin="160 0 10 0" VerticalAlignment="Center"
ItemTemplate="{StaticResource PickerItemTemplate}"
FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" />
<!--End Top Bar -->
</Grid>
</phone:PhoneApplicationPage>
Any ideas on what I may be doing wrong?
You have the set the ItemCountThreshold="0" on the ListPicker control in order to immediately enter full screen selection mode.
You can also set ExpansionMode="FullScreenOnly" on your listpicker to fix this up.
The control will be contained by the Grid.Row and will abide its size limits. That being said, it won't cross the border of the second row. You need to either have it inside another Grid.Row that has a larger height or open it in a popup.