I have custom title bar for all windows of my application.
I want to create a template that I can use many times on different windows or on Message Box
I am thinking what is the best practice to achieve this.
At the moment I have a title bar but it is hard coded in every window.
This is an example of one of the windows
<Window x:Class="MyApp.Configuration.Windows.NotMainWindow"
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"
Title="Some text"
Height="113.868" Width="405.84"
Background="#FFE5E5E5"
WindowStyle="None"
>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="34" />
</WindowChrome.WindowChrome>
<Window.Resources>
<ResourceDictionary Source="pack://application:,,,/somefolder.somefolder;component/Resources/TitleBarIconsStyle.xaml" />
</Window.Resources>
<Border x:Name="MainWindowBorder" BorderThickness="0" >
<Grid x:Name="parentContainer">
<Grid.RowDefinitions>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<!--Window chrome-->
<Grid Grid.Row="0" Height="30" Background="#585856">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--App icon-->
<Image Source="/Resources/icon.png" Width="18" Margin="2" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock FontFamily="Arial" Margin="4 3 0 0" Text="Some text"/>
</StackPanel>
<!--Caption buttons-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Style="{StaticResource MinimizeButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Minimize"
Click="CommandBinding_Executed_Minimize"/>
<Button x:Name="RestoreButton" Visibility="Collapsed" Style="{StaticResource RestoreButtonStyle}"
Click="CommandBinding_Executed_Restore" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Restore"/>
<Button x:Name="MaximizeButton" Visibility="Visible" Style="{StaticResource MaximizeButtonStyle}"
Click="CommandBinding_Executed_Maximize" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Maximize" />
<Button x:Name="CloseButton" Style="{StaticResource CloseButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
Click="CommandBinding_Executed_Close"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<TextBox x:Name="Input"/>
<Button x:Name="OkButton"
Content="Ok"/>
</Grid>
</Grid>
</Border>
</Window>
Based on this MSDN document , you can not customize (like change colors and add your icons) windows title bar in WPF App.
the solution is create your custom title bar style and set WindowStyle="None" in <Window/> tag.
There one custom title bar in my WPF app :
<Grid FlowDirection="RightToLeft">
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<StackPanel Margin="0 0 5 0" Orientation="Horizontal" Background="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" Grid.Row="0" Grid.Column="6" Grid.ColumnSpan="2" FlowDirection="LeftToRight">
<Button x:Name="btnCloseApp" IsEnabled="True" Margin="0 0 4 0" ToolTip="Exit" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnCloseApp_Click">
<materialDesign:PackIcon Kind="Shutdown" Height="20" Width="20"/>
</Button>
<Button x:Name="btnMinimizeApp" IsEnabled="True" ToolTip="Minimize" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnMiniApp_Click">
<materialDesign:PackIcon Kind="WindowMinimize" Height="20" Width="20"/>
</Button>
</StackPanel>
</Grid>
and in picture :
Again don't forget to set WindowStyle="None"
Related
I want to make searchbox like when I search Items then listbox is show in this page. I have make listbox page is in another wpf window. Can you please help on this I am facing maki problem regarding this.
When I search listbox Items from MainWindow.Xaml and click button then of item show in main page. and Items on See software page.
Thankyou!
MainWindow.xaml
<Window Title="Welcome" Background="#FFD6D6D6" WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen" MouseDown="Window_MouseDown"
AllowsTransparency="True" Height="600" Width="1050">
<!--Make serchbar -->
<Grid Background="#2892b5" Grid.Column="3" Margin="10,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition />
</Grid.RowDefinitions>
<Viewbox HorizontalAlignment="Left" Margin="22,4,0,0" VerticalAlignment="Center" Width="65">
<Image Source="/Resources/search_32px.png" Height="40" Width="70" />
</Viewbox>
<Viewbox HorizontalAlignment="Center" Margin="70,4,0,0" VerticalAlignment="Center" >
<Label Content="Search for software" FontWeight="Bold" FontSize="20" Foreground="White" Grid.Row="0" Width="286"/>
</Viewbox>
<TextBox Background="White" Foreground="Black" x:Name="search" FontSize="20" Grid.Row="1" TextChanged="TextBox_TextChanged" Margin="37,0,36,38"/>
<Button Grid.Row="1" Height="37" Width="37" Background="Transparent" BorderBrush="Transparent" VerticalAlignment="Top" HorizontalAlignment="Right">
<Image Source="/View/icons8_right_50px_1.png"/>
</Button>
</Grid>
MainWindow.xaml.cs
private void SearchClick_Click(object sender, RoutedEventArgs e)
{
}
SeeSoftware.xaml
<Window Title="SeeSoftware" Height="700" Width="800" WindowStyle="None" MouseDown="Window_MouseDown">
<ListBox x:Name="Listbox" Foreground="White" FontSize="15" BorderBrush="Transparent" Background="Transparent">
<ListBoxItem Height="50">
<StackPanel Orientation="Horizontal" Margin="20,0,0,0" HorizontalAlignment="Left">
<Image Height="30" Width="30" Source="/Resources/vscode.jpeg"/>
<Label VerticalAlignment="Center" Foreground="White" FontSize="18" Margin="20,0,0,0" Content="Visual Studio code" />
<TextBlock Margin="18,0,0,0" FontSize="18" VerticalAlignment="Center" >
<Hyperlink Foreground="White" NavigateUri="https://az764295.vo.msecnd.net/stable/6261075646f055b99068d3688932416f2346dd3b/VSCodeUserSetup-x64-1.73.1.exe" RequestNavigate="Hyperlink_RequestNavigate">
Install
<Image Height="13" Source="/Resources/icons8_download_26px.png"/>
</Hyperlink>
</TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
(UPDATE: even without DEVEXPRESS controls, the same behavior is observed. So, I tested it with a couple textBlocks inside of a Grid...)
I am new to WPF development and I am using Windows Template Studio on VS 2019 (net core 3.1).
I am also using DEVEXPRESS.
I am wondering why I am losing the default MetroWindow theme in a user control when I add a custom TitleTemplate to the ShellWindow.xaml.
This is likely something very simple that I am not doing properly...
Repro steps:
1 - Create a default WPF Windows Template Studio Project. Select Navigation Pane as the Project type.
2 - Add a second blank page.
3 - Add DevExpress.WPF to the project (Not needed to duplicate).
4 - Create a simple user control
<UserControl x:Class="NoDevExpresssTitleTemplate.Views.TestUserControl"
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:NoDevExpresssTitleTemplate.Views"
xmlns:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<dxlc:LayoutControl >
<dxlc:LayoutGroup>
<dxlc:LayoutItem Label="test1:" Width="150" VerticalAlignment="Center" Margin="20,0,0,0">
<dxe:TextEdit EditValue="Test1"/>
</dxlc:LayoutItem>
<dxlc:LayoutItem Label="test2:" Width="150" VerticalAlignment="Center" Margin="20,0,0,0">
<d:TextBox Text="test2"/>
</dxlc:LayoutItem>
</dxlc:LayoutGroup>
</dxlc:LayoutControl>
</Grid>
5 - Use the user control on the second blank page created,
<Page
x:Class="NoDevExpresssTitleTemplate.Views.SearchPage"
Style="{DynamicResource MahApps.Styles.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:properties="clr-namespace:NoDevExpresssTitleTemplate.Properties"
xmlns:views="clr-namespace:NoDevExpresssTitleTemplate.Views"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="48" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
Style="{StaticResource PageTitleStyle}"
Margin="{StaticResource MediumLeftMargin}"
Text="{x:Static properties:Resources.SearchPageTitle}" />
<Grid
Grid.Row="1"
Margin="{StaticResource MediumLeftRightMargin}"
Background="{DynamicResource MahApps.Brushes.Gray10}">
<!--
The Mahapps Gray10 color represents where you should place your content.
Place your content here.
-->
<views:TestUserControl></views:TestUserControl>
</Grid>
</Grid>
6 - Update the ShellWindow.xaml, including the TitleTemplate,
<controls:MetroWindow
x:Class="NoDevExpresssTitleTemplate.Views.ShellWindow"
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:dxlc="http://schemas.devexpress.com/winfx/2008/xaml/layoutcontrol"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
xmlns:properties="clr-namespace:NoDevExpresssTitleTemplate.Properties"
xmlns:templateSelectors="clr-namespace:NoDevExpresssTitleTemplate.TemplateSelectors"
Style="{StaticResource CustomMetroWindow}"
mc:Ignorable="d"
MinWidth="500"
MinHeight="350"
Title="{x:Static properties:Resources.AppDisplayName}">
<controls:MetroWindow.TitleTemplate>
<DataTemplate>
<dxlc:LayoutControl>
<dxlc:LayoutGroup Orientation="Vertical" Height="50" >
<TextBlock Text="{TemplateBinding Content}"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"
Margin="8 -1 8 0"
FontWeight="Light"
FontSize="{DynamicResource WindowTitleFontSize}"
FontFamily="{DynamicResource HeaderFontFamily}" />
<TextBlock Text="{TemplateBinding Content}"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"
Margin="8 -1 8 0"
FontWeight="Light"
FontSize="{DynamicResource WindowTitleFontSize}"
FontFamily="{DynamicResource HeaderFontFamily}" />
</dxlc:LayoutGroup>
</dxlc:LayoutControl>
</DataTemplate>
</controls:MetroWindow.TitleTemplate>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="{Binding LoadedCommand}" />
</i:EventTrigger>
<i:EventTrigger EventName="Unloaded">
<i:InvokeCommandAction Command="{Binding UnloadedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<controls:MetroWindow.LeftWindowCommands>
<controls:WindowCommands>
<Button
Width="{Binding ElementName=hamburgerMenu, Path=CompactPaneLength}"
AutomationProperties.Name="{x:Static properties:Resources.ShellGoBackButton}"
ToolTip="{x:Static properties:Resources.ShellGoBackButton}"
Command="{Binding GoBackCommand}">
<TextBlock
Text=""
FontSize="14"
FontFamily="Segoe MDL2 Assets"
AutomationProperties.Name="{x:Static properties:Resources.ShellGoBackButton}" />
</Button>
</controls:WindowCommands>
</controls:MetroWindow.LeftWindowCommands>
<controls:MetroWindow.Resources>
<templateSelectors:MenuItemTemplateSelector
x:Key="MenuItemTemplateSelector">
<templateSelectors:MenuItemTemplateSelector.GlyphDataTemplate>
<DataTemplate DataType="{x:Type controls:HamburgerMenuGlyphItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
FontSize="16"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
Text="{Binding Glyph}"
ToolTip="{Binding Label}" />
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Label}" />
</Grid>
</DataTemplate>
</templateSelectors:MenuItemTemplateSelector.GlyphDataTemplate>
<templateSelectors:MenuItemTemplateSelector.ImageDataTemplate>
<DataTemplate DataType="{x:Type controls:HamburgerMenuImageItem}">
<Grid Height="48">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Ellipse
Grid.Column="0"
Width="24"
Height="24"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ToolTip="{Binding Label}">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding Thumbnail}" />
</Ellipse.Fill>
</Ellipse>
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
FontSize="16"
Text="{Binding Label}" />
</Grid>
</DataTemplate>
</templateSelectors:MenuItemTemplateSelector.ImageDataTemplate>
</templateSelectors:MenuItemTemplateSelector>
</controls:MetroWindow.Resources>
<controls:MetroWindow.Content>
<controls:HamburgerMenu
x:Name="hamburgerMenu"
HamburgerButtonName="{x:Static properties:Resources.ShellHamburgerButtonName}"
IsPaneOpen="False"
DisplayMode="CompactInline"
ItemsSource="{Binding MenuItems}"
SelectedItem="{Binding SelectedMenuItem}"
ItemCommand="{Binding MenuItemInvokedCommand}"
ItemTemplateSelector="{StaticResource MenuItemTemplateSelector}">
<controls:HamburgerMenu.Content>
<Frame
x:Name="shellFrame"
Grid.Row="1"
NavigationUIVisibility="Hidden"
Focusable="False" />
</controls:HamburgerMenu.Content>
</controls:HamburgerMenu>
</controls:MetroWindow.Content></controls:MetroWindow>
The default Light.Blue theme/style is lost,
I'm trying to create some bar charts from DotNetProjects.Wpf.Toolkit that display some data totals, though the data can change at run time. The problem is that I cannot get the chart to fit the size of the content - I always have to provide a fixed value (and setting Height="Auto" doesn't work), but I don't know what the size will need to be while running. What can I do to make my chart fit the content rather than the other way around?
My XAML code looks like this:
<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"
xmlns:local="clr-namespace:Movie_Vault"
xmlns:Controls="clr-namespace:System.Windows.Controls;assembly=DotNetProjects.Layout.Toolkit" xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" x:Class="Movie_Vault.frmStatistics"
mc:Ignorable="d"
Title="frmStatistics" Style="{StaticResource RoundedFormStyle}" WindowStartupLocation="CenterOwner">
<Border Style="{StaticResource WindowBorderStyle}">
<DockPanel x:Name="OuterPanel" >
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Top">
<DockPanel x:Name="TopPanel" HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Image Height="16" Margin="8,4,8,4" Source="Images/process.png"/>
<TextBlock Style="{StaticResource MediumFont}"><Run Text="Statistics"/></TextBlock>
<DockPanel DockPanel.Dock="Right" HorizontalAlignment="Right" VerticalAlignment="Center">
<Button x:Name="btnClose" Content="X" Style="{StaticResource MicroButtonStyle}" Margin="0,0,8,0" Click="btnClose_Click"/>
</DockPanel>
</DockPanel>
</Border>
<Border Style="{StaticResource PanelBorderStyle}" DockPanel.Dock="Left" Margin="0,8,0,0">
<DockPanel VerticalAlignment="Top" >
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="400" Width="500">
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
</ScrollViewer>
</DockPanel>
</Border>
</DockPanel>
</Border>
</Window>
What can I do to make my chart fit the content rather than the other way around?
Get rid of any StackPanels:
<Grid Name="panelTopGenres">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<toolkit:Chart Name="chartTopGenres" Title="Top Genres" VerticalAlignment="Top"
Margin="16,16,16,8" Padding="8" Background="White" >
<toolkit:BarSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}"
IsSelectionEnabled="False" Background="White"/>
</toolkit:Chart>
<Button Grid.Row="1" x:Name="btnTopGenresToggle" Style="{StaticResource SmallButtonStyle}"
Content="Show All Genres" Width="120"
Margin="16,0,4,4" HorizontalAlignment="Left" Click="btnToggle_Click" />
</Grid>
A StackPanel doesn't resize its children.
I dont quite understand how to make a simple ContentDialog. Basically I want to have a button that when pressed the ContentDialog Pops up. The ContentDialog should have at least 1 Button. I guess Im missing out something. I tried to put my part of the Code into it but there is an error when it Comes to build the program. My guess is that I still have to enter something in the XAML to make it work. This is the default Code of the .XAML (at the Bottom of the post you find the Code I want to put into it):
<Page
x:Class="PDFViewerSDK_Win10.PDFReaderPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PDFViewerSDK_Win10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="OnSizeChanged">
<Page.Resources>
<DataTemplate x:Key="MenuItemTemplate">
<Grid HorizontalAlignment="Left" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel Margin="0,0,0,0" Orientation="Vertical">
<TextBlock TextWrapping="Wrap" Foreground="{StaticResource ApplicationForegroundThemeBrush}" Width="300" VerticalAlignment="Center" Text="{Binding Title}" HorizontalAlignment="Left" FontFamily="Segoe UI"/>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="68"/>
<RowDefinition Height="*"/>
<RowDefinition Height="0.35*"/>
</Grid.RowDefinitions>
<Canvas x:Name="mPDFView" Grid.RowSpan="3"/>
<Canvas x:Name="mPDFThumb" Grid.Row="2" Visibility="Visible"/>
<ListView x:Name="mMenuView"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0, 68, 0, 0"
ItemTemplate="{StaticResource MenuItemTemplate}"
IsItemClickEnabled="True"
ItemClick="OnMenuListItemClicked"
Visibility="Collapsed"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
Grid.RowSpan="2"/>
<Grid Height="68" Margin="0" VerticalAlignment="Top" Background="#7FC0C0C0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel HorizontalAlignment="Left" Grid.Column="0" Orientation="Horizontal">
<Button x:Name="backButton" Click="OnBtnGoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" Margin="10,10,0,0" Foreground="Black" BorderBrush="Black" Background="Black" AllowDrop="True" VerticalAlignment="Top" RenderTransformOrigin="-1.62,0.618"/>
<Button x:Name="searchBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/view_search.png"/>
</Button>
<Button x:Name="viewAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/annot_line.png"/>
</Button>
<Button x:Name="doneAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" Visibility="Collapsed">
<Image Source="Assets/images/annot_done.png"/>
</Button>
<Button x:Name="removeAnnotBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" Visibility="Collapsed">
<Image Source="Assets/images/annot_remove.png"/>
</Button>
<Button x:Name="selectBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<!--Image Source="Assets/images/icon_select.png"/-->
<BitmapIcon Name="mSelectIcon" UriSource="ms-appx:///Assets/images/icon_select.png" />
</Button>
<Button x:Name="viewMenuBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/icon_menu.png"/>
</Button>
<TextBox x:Name="mPageInput" Width="90" Margin="30,10,5,10" FontSize="30" KeyDown="OnKeyDown"/>
<TextBlock x:Name="mPageDisplay" Width="90" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30" Margin="0,10,0,10"/>
<Button x:Name="settingsBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/icon_setting.png"/>
</Button>
<Button x:Name="thumbnailBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnThumbItemTapped">
<Image Source="Assets/images/icon_thumbnail.png"/>
</Button>
<Image Source="Assets/images/icon_menu.png"/>
</StackPanel>
<StackPanel HorizontalAlignment="Right" Grid.Column="1" Orientation="Horizontal">
<Button x:Name="viewInfoBtn" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped">
<Image Source="Assets/images/view_about.png"/>
</Button>
</StackPanel>
</Grid>
</Grid>
<Page.BottomAppBar>
<AppBar x:Name="mAppBar">
<Grid x:Name="PDFOptionPanel"/>
</AppBar>
</Page.BottomAppBar>
</Page>
Now where do I have to put this part of the Code? Do I have to add something? What am I missing here?
<ContentDialog x:Name="test" PrimaryButtonText="Ok" SecondaryButtonText="Cancel" Style="{StaticResource AppBarButtonStyle}" Tapped="OnOptionItemTapped" </ContentDialog>
Derive from official document,
Use a ContentDialog to request input from the user, or to show information in a modal dialog. You can add a ContentDialog to an app page using code or XAML, or you can create a custom dialog class that's derived from ContentDialog. Both ways are shown in the examples section of this topic.
There are many ways could integrate ContentDialog to page, If you just make a simple ContentDialog, you could implement it in code behind.
private async void DisplayNoWifiDialog()
{
ContentDialog noWifiDialog = new ContentDialog()
{
Title = "No wifi connection",
Content = "Check connection and try again.",
CloseButtonText = "Ok"
};
await noWifiDialog.ShowAsync();
}
If you want implement it with xaml, please put your ContentDialog in the bottom of the root Grid. for example:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="This is ContentDialog"/>
<Button Click="Button_Click" Content="ClickMe"/>
<ContentDialog x:Name="test" PrimaryButtonText="Ok" SecondaryButtonText="Cancel" Tapped="OnOptionItemTapped" ></ContentDialog>
</Grid>
Please note, the ContentDialog that you provided missed > end mark. For more info please refer this.
A large black area appears on the right side of the window when I run the program, and I can't figure out why. It's not there in the preview on the XAML file page in Visual Studio 2017, and I ran it once on a Windows 7 computer, and the black area wasn't there (I'm primarily on Windows 10). The problem could possibly be in another file, but I cannot find it.
<Window x:Class="Project.Widget"
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:Project"
mc:Ignorable="d"
Title="Menu"
WindowStartupLocation="Manual"
ResizeMode="NoResize"
Width="109"
SizeToContent="WidthAndHeight"
WindowState="Minimized"
Background="#2D3A48"
Topmost="False"
Loaded="Window_Loaded"
Closing="Window_Closing" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="77"/>
<RowDefinition Height="28"/>
<RowDefinition Height="90"/>
<RowDefinition Height="60"/>
</Grid.RowDefinitions>
<Image x:Name="Icon"
Source="./Resources/Icon.png"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="77"
Width="109" />
<Label x:Name="labelUsername"
Grid.Row="1"
Content=""
FontSize="14"
Foreground="White"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" />
<Label x:Name="labelScore"
Grid.Row="2"
Content="0%, 0 of 0"
Foreground="White"
FontSize="14"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="0,0,0,0" />
<Image x:Name="AvgScoreDot"
Grid.Row="2"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="50"
Source=".\Resources\yellow_dot.png"
Margin="0,32,0,0"/>
<Label x:Name="labelAvgScore"
Grid.Row="2"
Content="0.0"
Foreground="White"
FontSize="24"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Margin="0,35,0,0"
FontWeight="Bold" />
<Button x:Name="MailBtn"
Grid.Row="3"
Height="60"
Width="109"
HorizontalAlignment="Center"
VerticalAlignment="Center"
BorderBrush="#FF2D3A48"
Click="Mail_Click" >
<Button.Background>
<ImageBrush
ImageSource="/Resources/mail.png"
Stretch="None" />
</Button.Background>
</Button>
<Button x:Name="MailBadgeBtn"
Grid.Row="3"
Content="0"
Foreground="White"
FontSize="11"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Height="20"
Width="20"
Margin="0,30,24,10"
HorizontalAlignment="Right"
VerticalAlignment="Center"
Click="MailBadgeBtn_Click" BorderThickness="0">
<Button.Background>
<ImageBrush
ImageSource=".\Resources\red_dot.png" />
</Button.Background>
</Button>
<TextBlock x:Name="labelConnection"
Grid.Row="0"
Text=" No Connection or blocked by Firewall"
Foreground="Red"
Background="White"
TextWrapping="Wrap"
TextAlignment="Center"
VerticalAlignment="Center"
Height="77"
Width="109"
HorizontalAlignment="Center" />
</Grid>
Here's an image of what I get when I run it:
Here's what I get when I remove SizeToContent="WidthAndHeight" and add a height of 300 (I also had to remove your event handlers since I don't have that code, and add garbage images to the Resources folder since I don't have the original images):
Is that more like what you were looking for? You can also choose to explicitly set SizeToContent to "Manual".