I'm developing a UWP application. The design of the UI is similar to the Email app in Windows 10 (My app design).
This is my XAML code:
<Page
x:Class="Milano.InWork"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Milano"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid BorderBrush="White" BorderThickness="1">
<Grid.Background>
<ImageBrush Stretch="Fill" ImageSource="Images/Background.png"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="720" VerticalAlignment="Top" Width="60" BorderBrush="#FFF5F1F1" BorderThickness="0,0,1,0">
<Button x:Name="MenuButton" Content="" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="38" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Menu-100.png"/>
</Button.Background>
</Button>
<Button x:Name="logoutbutton" Content="" HorizontalAlignment="Left" Margin="10,650,0,0" VerticalAlignment="Top" Height="43" Width="38">
<Button.Background>
<ImageBrush Stretch="Uniform" ImageSource="Images/Logout_Button.png"/>
</Button.Background>
</Button>
</Grid>
<Grid HorizontalAlignment="Left" Height="47" Margin="63,2,-121,0" VerticalAlignment="Top" Width="1338" BorderBrush="#FFFDFDFD" Padding="0,0,0,1" BorderThickness="0,0,0,1">
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" TextWrapping="Wrap" Text="В Работе" VerticalAlignment="Top" Height="47" Width="1218" FontSize="32" FontFamily="SF UI Display" Padding="550,0,0,0" Foreground="White"/>
</Grid>
<ScrollViewer HorizontalAlignment="Left" Height="668" Margin="63,52,0,0" VerticalAlignment="Top" Width="350">
<GridView x:Name="OrdersGridView" >
<GridView.ItemTemplate>
<DataTemplate>
<StackPanel >
<Grid Height="204" BorderBrush="#FFFBF8F8" BorderThickness="0,0,1,1">
<TextBlock Text="{Binding date_created}" HorizontalAlignment="Left" TextAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" Width="350" Height="50" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock TextAlignment="Center" HorizontalAlignment="Left" Margin="0,146,-1,0" TextWrapping="Wrap" Text="{Binding billing.address_1}" VerticalAlignment="Top" Height="58" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" />
<TextBlock HorizontalAlignment="Left" TextAlignment="Center" Margin="0,86,-1,0" TextWrapping="Wrap" Text="{Binding billing.first_name}" VerticalAlignment="Top" Height="60" Width="350" FontFamily="SF UI Display" FontSize="25" FontWeight="Light" Foreground="White" Padding="0,0,0,0"/>
</Grid>
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</ScrollViewer>
</Grid>
What I need to do: When user clicks on Grid in right place of screen app show something like Fragment (I know this is Android thing) with some fields and data, like in the Email Windows 10 app:
Before clicking
After clicking
How I can implement this?
Or where I can read tutorial or something like this?
Thank's for help!
It is a typical Master/Detail design in UWP, you can refer to the official Master/detail sample, when on wide-screen mode, it uses ContentPresenter to show the details, and when on narrow-screen mode, it navigates with parameter to the detail page. The official sample is so clear, you can have a check.
From your first image, I think you can use a ListView to replace your GridView, for both controls, you can use SelectionChanged or ItemClick event to show the details, if you want to use ItemClick event, please don't forget to enable the IsItemClickEnabled property.
There is a MasterDetails (Mail App) sample which uses Template 10 as project template, if you're interest in this sample, you can also have a check.
Related
Hello I added some buttons to my Main_Page.xaml and they resize with the window while running the application and i dont want that. I want them to stay the same proportion when i run the app.
Button names are: Exercise_tab_left_button, Exercise_tab_right_button
<Page x:Class="TrackFit_Project.Main_Page"
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:TrackFit_Project"
mc:Ignorable="d"
d:DesignHeight="453.635" d:DesignWidth="855.207"
Title="Main_Page"
ShowsNavigationUI = "false" >
<TabControl Margin="10,10,10.333,10.333">
<TabItem Header="Exercise"
HorizontalAlignment="Left"
Width="58"
Height="22"
Margin="-2,-2,0,0"
VerticalAlignment="Top">
<Grid Background="#FFE5E5E5">
<Button x:Name="Exercise_Tab_Profile_Button" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Click="profileButtonClick">
<Image>
<Image.Source>stock profile image.png</Image.Source>
</Image>
</Button>
<Rectangle x:Name="Exercise_tab_rectangle" Fill="#FFCFC6C6" HorizontalAlignment="Left" Height="295" Margin="137,50,0,0" Stroke="Black" VerticalAlignment="Top" Width="625"/>
<TextBlock HorizontalAlignment="Left" Height="234" Margin="169,87,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="548"/>
**<Button x:Name="Exercise_tab_left_button" Content="<" Margin="148,189,655,154" FontSize="18" FontWeight="Bold"/>
<Button x:Name="Exercise_tab_Right_button" Content=">" Margin="717,189,83,155" FontSize="18" FontWeight="Bold"/>**
<TextBlock x:Name="Log_Out_Text_Block" HorizontalAlignment="Left" Margin="10,105,0,0" TextWrapping="Wrap" VerticalAlignment="Top" FontWeight="Bold">
<Hyperlink x:Name="Log_out_hyperlink" Click="Log_out_hyperlink_Click">Log out</Hyperlink>
</TextBlock>
</Grid>
</TabControl>
You have to specify the properties Height and Width instead of setting these values indirectly using the Margin property.
Currently the Margin property determines the width and height of the buttons when they are arranged in the Grid. This can be useful when the UI is static and must not resize when the window is resized.
Assuming you want the UI to dynamically adapt to the size you should embed the Rectangle, TextBlock and the Buttons in a second Grid in a way like this (you might want to figure out the right values for the Margin and size of the buttons):
<Grid Margin="137,50,10,10">
<Rectangle x:Name="Exercise_tab_rectangle" Fill="#FFCFC6C6" Stroke="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<TextBlock HorizontalAlignment="Stretch" Height="234" Margin="32,37" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Stretch" />
<Button x:Name="Exercise_tab_left_button" Content="<" Margin="11" VerticalAlignment="Center" HorizontalAlignment="Left" Width="20" Height="50" FontSize="18" FontWeight="Bold"/>
<Button x:Name="Exercise_tab_Right_button" Content=">" Margin="11" VerticalAlignment="Center" HorizontalAlignment="Right" Width="20" Height="50" FontSize="18" FontWeight="Bold"/>
</Grid>
In Windows 10 Universal app development the ScrollViewer causes App crashes. In the Windows dev Center this was also mentioned but not solved (https://social.msdn.microsoft.com/Forums/windowsapps/en-US/a737f407-d59f-4b10-a7d0-de9ead6d4f5f/uwpscrollviewer-occasional-crash?forum=wpdevelop).
Now my Problem:
I put a second grid on the Standard one of the xaml file. Then I added the ScrollViewer to this grid. After that i put another grid on the scrollviewer and then i added some Buttons to this grid. When scrolling the app crashes very often.
Do you have any idea how to fix that or how it can be done different?
Here the Code:
<Page
x:Class="ProjectMoralsKite.Datenbank"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ProjectMoralsKite"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:Name="grid">
<Grid.Background>
<ImageBrush Stretch="Fill"/>
</Grid.Background>
<Grid HorizontalAlignment="Left" Height="529" Margin="10,10,0,0" VerticalAlignment="Top" Width="340" BorderThickness="0,-1,0,0" Background="White" Opacity="0.6"/>
<TextBlock x:Name="textBlock" TextAlignment="Center" HorizontalAlignment="Left" Margin="6,70,0,0" TextWrapping="Wrap" Text="Verwaltung" VerticalAlignment="Top" Width="340" FontSize="29.333"/>
<Button x:Name="button" Content="Zurück" HorizontalAlignment="Left" Margin="10,507,0,0" VerticalAlignment="Top" Width="150" Click="button_Click"/>
<ScrollViewer HorizontalAlignment="Left" Height="380" Margin="10,109,0,0" VerticalAlignment="Top" Width="340">
<Grid HorizontalAlignment="Left" Height="655" VerticalAlignment="Top" Width="340">
<Button x:Name="button1" Content="Plan" HorizontalAlignment="Left" Margin="0,24,0,0" VerticalAlignment="Top" Height="54" Width="340"/>
<Button x:Name="button1_Copy" Content="Kunden" HorizontalAlignment="Left" Margin="0,83,0,0" VerticalAlignment="Top" Height="54" Width="340" Click="button1_Copy_Click"/>
<Button x:Name="button1_Copy1" Content="Baustellen" HorizontalAlignment="Left" Margin="0,142,0,0" VerticalAlignment="Top" Height="54" Width="340" Click="button1_Copy1_Click"/>
<Button x:Name="button1_Copy2" Content="Aufträge" HorizontalAlignment="Left" Margin="0,201,0,0" VerticalAlignment="Top" Height="54" Width="340" Background="#33000000" Click="button1_Copy2_Click"/>
<Button x:Name="button1_Copy3" Content="Zuweisung" HorizontalAlignment="Left" Margin="0,260,0,0" VerticalAlignment="Top" Height="54" Width="340" Background="#33FF0000"/>
<Button x:Name="button1_Copy4" Content="Rechteverwaltung" HorizontalAlignment="Left" Margin="0,319,0,0" VerticalAlignment="Top" Height="54" Width="340" Background="#33FF0000"/>
</Grid>
</ScrollViewer>
</Grid>
</Page>
I have a solution made of a project and a library
The library is a "WPF User Control Library" which holds a window called MegaBanner WF which is used as a MessageBox shaped in a better way.
When I build it I get no errors in regular files but two errors in the c:\development\easyrun\helperlib\obj\debug\views\megabannerwfwindow\megabannerwfwindow.g.i.cs file.
The problem is related with having the HelperNS prefix. In fact if I manually take it off the problem vanishes.
But that is not the right solution since that file is automatically generated and delete all the times.
The problem arises with ALL event added in the XAML file of the MegaBannerWF window.
<Base:WindowViewBase x:Class="HelperLib.MegaBannerWFWindowNS.MegaBannerWFWindow"
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:HelperLib.MegaBannerWFWindowNS.Design"
xmlns:fa="http://schemas.fontawesome.io/icons/"
WindowStartupLocation="CenterOwner"
ResizeMode="NoResize" WindowStyle="None" AllowsTransparency="True" Background="{x:Null}" WindowState="Maximized" ShowInTaskbar="False" KeyDown="WindowViewBase_KeyDown" >
<d:Window.DataContext>
<design:DesignMegaBannerWFWindowViewModel/>
<Grid Name="mainGrid" Height="200" Opacity="0.75" Background="Black">
<TextBlock Name="tbxBig" Text="---" HorizontalAlignment="Stretch" TextAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="White" Height="50" Margin="10,47,10,108" Width="1000" />
<TextBlock Name="tbxBigUp" Text="---" HorizontalAlignment="Stretch" TextAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="White" Height="50" Margin="2,16,10,139" Width="1000" />
<TextBlock x:Name="tbxSmall" Text="---" HorizontalAlignment="Stretch" VerticalAlignment="Center" FontSize="12" TextWrapping="Wrap" TextAlignment="Center" Foreground="White" Height="31" Margin="10,92,10,77" Width="1000" />
<StackPanel Name="spButtons" HorizontalAlignment="Center" VerticalAlignment="Bottom" Opacity="0.75" Margin="0,0,0,10" Orientation="Horizontal">
<Button x:Name="bt1" Content="1" Width="100" FontSize="16" Margin="10,10,10,10" Opacity="1" Click="Button_Click"/>
<Button x:Name="bt2" Content="2" Width="100" FontSize="16" Margin="10,10,10,10" Opacity="1" Click="Button_Click"/>
<Button x:Name="bt3" Content="3" Width="100" FontSize="16" Margin="10,10,10,10" Opacity="1" Click="Button_Click"/>
</StackPanel>
<ComboBox x:Name="cmbUser" HorizontalAlignment="Center" FontSize="16" Foreground="Black" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" Margin="204,61,204,0" Background="Gainsboro" VerticalAlignment="Top" Height="30" Opacity="1" Width="200" BorderBrush="#FF0363EE" BorderThickness="5">
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Background" Value="Gainsboro" />
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
<fa:ImageAwesome Name="imgWait" Icon="Spinner" Spin="True" SpinDuration="10" Width="100" Height="100" Foreground="Gainsboro" Margin="332,84,336,16"/>
<PasswordBox x:Name="pbxPassword" HorizontalAlignment="Center" Foreground="Black" FontSize="16" Margin="204,97,204,0" HorizontalContentAlignment="Left" Opacity="1" Background="Gainsboro" VerticalAlignment="Top" Height="30" Width="200"/>
So what I'd like to know is WHY there is this error in the .g.i.cs file when there are no error anywhere else.
As a workaround I have seen that if I put events anywhere else apart from the main window the problem doesn't arise. What I'd like to know is to catch keys in the window. This is easy by putting the key down event in the main window but that causes the problem. So I'd need to catch the key down event in its children (e.g. the maingrid) but if I put the key down event there it's not fired.
Thanx for any help
--ADD--
Here is the structure of my solution.
but what I'd like to understand is:
WHY there's an error in g.i.cs file and nowhere else
WHY it's related to events of the megabannerWF window only and not to it's children
alternatively
How to catch key events from the mainWindow to its children.
--ADD2 for – Grx70---
Here above is my object browser structure. I think it's not different from what I have already shown before.
How could we arrange the controls on a WPF window so that it would automatically align the controls while switching between view modes occur ie between landscape and portrait mode.
<Window x:Class="Custom_Track_Reports.LoginWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LoginWindow" >
<Viewbox Stretch="Fill">
<Grid Background="#FF58B0DF" Height="401">
<Rectangle Fill="#FFF0F3F4" Height="173" Margin="45,197,58,0" Stroke="Black" VerticalAlignment="Top" AllowDrop="True" />
<Image Height="125" Margin="340,10,330,0" VerticalAlignment="Top" Source="Images/logo_lrg.png"/>
<Label Content="Custom Track Reports" HorizontalAlignment="Left" Margin="287,147,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.607,1.112" Width="268" Height="47" FontFamily="Arial" FontSize="26" Foreground="White"/>
<TextBox Margin="128,0,0,110" TextWrapping="Wrap" VerticalAlignment="Bottom" Height="25" BorderThickness="1" FontFamily="Arial" FontSize="21" Text="" Name="userTextBox" FontStretch="Expanded" Opacity="1" HorizontalAlignment="Left" Width="546" AcceptsReturn="False" KeyDown="userTextBox_KeyDown" />
<Button x:Name="enterButton" Content="Enter" HorizontalAlignment="Right" Margin="0,311,166,0" VerticalAlignment="Top" Width="110" Height="26" FontSize="14" Style="{DynamicResource button}" Click="enterButton_Click"/>
<Label Content="User ID" FontSize="20" FontWeight="Bold" Height="40" HorizontalAlignment="Left" Margin="122,215,0,0" Name="label1" VerticalAlignment="Top" Width="105" />
</Grid>
</Viewbox>
I am building a WPF application which contains a large number of pages. I want to know whether there is any function which is similar to IsPostBack in Asp.Net. I just wanted to know is this the first time the specific page is loading. Thanks in advance.
xaml
<Window x:Class="Custom_Track_Reports.LoginWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="LoginWindow" >
<Viewbox Stretch="Fill">
<Grid Background="#FF58B0DF" Height="401">
<Rectangle Fill="#FFF0F3F4" Height="173" Margin="45,197,58,0" Stroke="Black" VerticalAlignment="Top" AllowDrop="True" />
<Image Height="125" Margin="340,10,330,0" VerticalAlignment="Top" Source="Images/logo_lrg.png"/>
<Label Content="Custom Track Reports" HorizontalAlignment="Left" Margin="287,147,0,0" VerticalAlignment="Top" RenderTransformOrigin="0.607,1.112" Width="268" Height="47" FontFamily="Arial" FontSize="26" Foreground="White"/>
<TextBox Margin="128,0,0,110" TextWrapping="Wrap" VerticalAlignment="Bottom" Height="25" BorderThickness="1" FontFamily="Arial" FontSize="21" Text="" Name="userTextBox" FontStretch="Expanded" Opacity="1" HorizontalAlignment="Left" Width="546" AcceptsReturn="False" KeyDown="userTextBox_KeyDown" />
<Button x:Name="enterButton" Content="Enter" HorizontalAlignment="Right" Margin="0,311,166,0" VerticalAlignment="Top" Width="110" Height="26" FontSize="14" Style="{DynamicResource button}" Click="enterButton_Click"/>
<Label Content="User ID" FontSize="20" FontWeight="Bold" Height="40" HorizontalAlignment="Left" Margin="122,215,0,0" Name="label1" VerticalAlignment="Top" Width="105" />
</Grid>
</Viewbox>
If your page navigation is taking place via Frame, then attach to the Frame.Navigated event. If you provide more detail (some XAML and code) then we might be able to be more helpful...