Navigation Guidelines does mention that we can include thumbnails in the Navigation bar(top app bar) for buttons. I have searched for examples but found none.
I have created a basic top app bar.
Could someone help me out?
Appbar with thumbnail doesn't need any special code. Check the below given code. You can put anything within Grid.
<Page.TopAppBar>
<AppBar Height="180" Background="Tan">
<StackPanel Orientation="Horizontal">
<Grid Height="160" Width="200" Background="Red" Margin="10"/>
<Grid Height="160" Width="200" Background="Green" Margin="10"/>
<Grid Height="160" Width="200" Background="Yellow" Margin="10"/>
<Grid Height="160" Width="200" Background="Blue" Margin="10"/>
</StackPanel>
</AppBar>
</Page.TopAppBar>
Related
I have a little question. I'm new to WPF and a strange thing happened to me. In the designer everything looks fine, but as soon as I start the application, a piece ,,cuts off"(via.photo) and it looks pretty bad. Could it be that the application is not responsive?
My XAML code:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}" Height="Auto"
Width="Auto"
>
<Border
Background="Black"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="1340"
Height="1100"
CornerRadius="20"
>
<Border
Background="White"
CornerRadius="20"
Height="700"
Width="500"
Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center"
>
<Grid
>
<TextBlock
Text="Welcome"
Width="200"
Height="200"
Foreground="Black"
FontSize="50" FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"
>
</TextBlock>
</Grid>
</Border>
</Border>
</TabItem>
After what I edited app:
Your code has a few issues:
You're hardcoding the Margin values to position your controls. Instead, you should use proper panels (DockPanel, WrapPanel, and Grid). Use Margin property to set margin, not a position.
Use HorizontalAlignment and VerticalAlignment properties to position your elements, thus your UI would be more responsive and user-friendly.
To be able to view, how your window and its content would look like - try to set d:DesignHeght and d:DesignWidth properties on a window. Try to Google how to use them.
In the end, your code should look like following:
<TabItem Header="TabItem"
Visibility="Hidden"
x:Name="Home_Page"
Background="{x:Null}"
BorderBrush="{x:Null}"> <!-- Properties order is a bit confusing, it is better to order them by priority, or just alphabetically. -->
<Border Background="Black">
<Border Background="White"
CornerRadius="20"
Margin="0,0,93,118"> <!-- Should it have such values? Maybe just somenthing like Margin="0 0 90 120"? -->
<Grid>
<TextBlock Text="Welcome"
Foreground="Black"
FontSize="50"
FontFamily="/Peel_App;component/Fonts/#Kashima Brush Demo"/>
</Grid>
</Border>
</Border>
</TabItem>
I'm trying to create a button bar with images. My Xaml is as follows:
<Border Grid.Row="1" Margin="0" BorderBrush="Black" BorderThickness="1">
<StackPanel x:Name="ButtonsPanel" Orientation="Horizontal" Margin="0">
<Button x:Name="NewButton" Margin="3" Command="ApplicationCommands.New" ToolTip="New project" BorderThickness="0">
<Image Source="/Resources/NewFile_16x.png"/>
</Button>
<Button x:Name="OpenProjectButton" Margin="3" Command="ApplicationCommands.Open" ToolTip="Open project" BorderThickness="0">
<Image Source="/Resources/OpenFile_16x.png"/>
</Button>
<Button x:Name="SaveProjectButton" Margin="3" Command="ApplicationCommands.Save" ToolTip="Save project" BorderThickness="0">
<Image Source="/Resources/Save_16x.png"/>
</Button>
</StackPanel>
</Border>
It all looks fine in the IDE (VS2019 Community) but when I run the app, the images are really small. If I've tried adding Height and Width properties to the Button and/or the Image tag, but all that does display a gray square of the correct dimensions but with no image. I added Stretch="Fill" in the image tag, but it didn't help. I even tried images of different sizes to see if that was the problem, but nothing seems to help.
Any advice would be appreciated.
[Edit]
I was wrong about what was being displayed with the small images. As it happens, it's the same gray squares, just smaller. So it's not a sizing problem per se, but a rendering one ... ?
If it helps any, here is a screenshot:
1) Check that images are really located under the Resources folder of the project. Sometimes the gray square is displayed instead of image if wrong location of the image file is specified.
2) Set the row height containing buttons to Auto should display the images in original size when Stretch property is defined as Uniform (if is default value). So, try the following:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="1" Margin="0" BorderBrush="Black" BorderThickness="1">
<StackPanel x:Name="ButtonsPanel" Orientation="Horizontal" Margin="0">
<Button x:Name="NewButton" Margin="3" Command="ApplicationCommands.New" ToolTip="New project" BorderThickness="0">
<Image Source="pack://application:,,,/Resources/NewFile_16x.png" />
</Button>
<Button x:Name="OpenProjectButton" Margin="3" Command="ApplicationCommands.Open" ToolTip="Open project" BorderThickness="0">
<Image Source="pack://application:,,,/Resources/OpenFile_16x.png" />
</Button>
<Button x:Name="SaveProjectButton" Margin="3" Command="ApplicationCommands.Save" ToolTip="Save project" BorderThickness="0">
<Image Source="pack://application:,,,/Resources/Save_16x.png" />
</Button>
</StackPanel>
</Border>
</Grid>
I'm just new and messing around with the WPF C#.
I noticed that the design view and have some minor differences. Most noticeable at the button.
Design View:
Ouput # 1:
Ouput # 2:
It seems that the window/container is resizing/shrinking even when both min and max width's and height's were set with fixed values and resize mode is set to NoResize.
I could easily deal with some of the controls by setting up the vertical and horizontal alignments since the adjustments are not too noticeable, but for the Add button the differences are noticeable from the supposed output.
I did try setting the min size of the button so that it would not be affected by the resizing and there would still be space for the margins but the button properly renders only a part of it. (please see output 1)
The only compromise that I could is to set both vertical and horizontal alignment to stretch and not put any size constraints on the button but the button would end up shrinking from its original size. (please see output 2)
Here's the XAML for the window.
<Window x:Class="Game_Viewer.NewApp"
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:Game_Viewer"
mc:Ignorable="d"
Title="Add New Program" Height="155" Width="250" ResizeMode="NoResize" Background="#FF515151" WindowStyle="ToolWindow" WindowStartupLocation="CenterScreen" MinHeight="155" MinWidth="250">
<Grid Margin="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0*"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Image x:Name="appicon_img" Margin="10,10,0,0" Source="Resources/menu_bg.png" Stretch="Fill" Height="35" VerticalAlignment="Top" HorizontalAlignment="Left" Width="35" Grid.ColumnSpan="2"/>
<TextBox x:Name="apppath_txtbox" HorizontalAlignment="Left" Margin="10,55,0,0" Width="154" Foreground="White" Background="#FF6E6E6E" Text="Program Path" VerticalContentAlignment="Center" BorderBrush="#FF707070" MaxLines="1" Height="25" VerticalAlignment="Top" FontSize="10" Grid.ColumnSpan="2"/>
<Button Content="Search" Margin="169,55,10,0" Click="BrowseApp_Click" Foreground="White" Background="#FF515151" FontWeight="Medium" Height="25" VerticalAlignment="Top" FontSize="10" Grid.ColumnSpan="2"/>
<Button x:Name="add_btn" Content="Add Program" Margin="72,89,72,8" Foreground="White" Background="#FF515151" Click="AddProgram_Click" FontWeight="Medium" Grid.ColumnSpan="2" MinHeight="30" MinWidth="100"/>
<TextBox x:Name="appname_txtbox" Margin="50,10,10,0" TextWrapping="WrapWithOverflow" Foreground="White" Text="Program Name" MaxLines="1" IsUndoEnabled="True" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" BorderBrush="#FF707070" FontWeight="Medium" Background="#FF6E6E6E" Height="35" VerticalAlignment="Top" Grid.ColumnSpan="2"/>
</Grid>
</Window>
I would like to know a solution or round-about for this kind of issue.
It's not really a problem having this issue as it is only aesthetic but I would at least know the reason why this is happening. And could you refer me to good tutorials for wpf using c#.
Thanks in advance and have a wonderful day!
This question already has an answer here:
How do I place a text over a image in a button in WinRT
(1 answer)
Closed 5 years ago.
I am learning different ways of achieving certain layouts with XAML in UWP (I know I'm late to the party but I just started with the UWP stuff!)
What I am trying to achieve is a main navigation page kind of thing from a hub control on my main page. At every HubSection, I will have button on each column of a 2-column grid, which will contain buttons. Ive'tried something similar to this post but the debugger kept failing to attach to my UWP app when I used images instead of textblocks.
Essentially, what I've got until now is something like this: (I've shared my code down below)
But what I am trying to achieve is each button having its own image background and a separate TextBlock with semi-transparent background at the bottom centre of the button... (I've only photo shopped it, this is the thing I am trying to achieve...)
So this is what I've tried so far... I've also tried the relative panel but no luck...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Center">Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Grid>
My complete code looks something like this for this page.
<Page
x:Class="VaultManager.Terminal.Views.MainPage"
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">
<Grid Background="Black">
<Hub SectionHeaderClick="Hub_SectionHeaderClick">
<Hub.Header>
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="pageTitle" Text="My Hub Sample" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
</Grid>
</Hub.Header>
<HubSection Header="Overview">
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<RelativePanel>
<TextBlock>Column 0 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</RelativePanel>
</Button>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,10,10,10">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 1 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<StackPanel>
<TextBlock>Column 1 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="Videos" Name="Videos">
<!-- yada yada -->
</HubSection>
<HubSection Header="Audios" Name="Audios">
<!-- blah blah -->
</HubSection>
</Hub>
</Grid>
Good job giving us all that info. You may want to take a look here since the asker in that question seems to have had a similar issue. The answerer suggested using a Grid instead of a StackPanel. Hope that helps. After that, you should be able to adjust the transparency of the text. If you are using visual studio you can just click on the text element and adjust the background brush from the Properties tab. The button w/ the image should look like this:
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock Text = "Column 0 Item 1">
<TextBlock.Background>
<SolidColorBrush Color="(**Colour here**)" Opacity = "(**Opacity Here {1 being opaque and 0 being transparent}**)/>
</TextBlock.Background></TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
</Button>
I would like to have a popup window. Even though I am using MvvmCross, it will strictly run on Android. In Windows Store, you can do the following with xaml:
<Popup VerticalOffset="300" HorizontalOffset="200" x:Name="SigPopup" >
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="1">
<StackPanel>
<StackPanel Orientation="Horizontal" >
<Button x:Name="btnAccept" Content="Accept" Click="btnAccept_Click"/>
<Button x:Name="btnCancel" Grid.Column="1" Content="Cancel" Click="btnCancel_Click"/>
<TextBlock x:Name="txtSigner" Text="Shipper" Style="{StaticResource SubheaderTextBlockStyle}" Margin="25,3,0,0" />
</StackPanel>
<!-- Inking area -->
<Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
Background="{StaticResource ApplicationPageBackgroundThemeBrush}"
BorderThickness="2" Width="750" Height="175">
<Grid x:Name="inkPanel" Margin="5">
<!-- Inking area -->
<Canvas x:Name="InkCanvas" Background="White" Margin="5" />
</Grid>
</Border>
</StackPanel>
</Border>
</Popup>
You can use this to popup a window to collect a Signature. There is an accept and cancel button you can wire up accordingly. Is there any way to do this using MvvmCross? I have watched the ViewModel demo and saw where you could draw rectangles and put data in them and it was bound, but it didn't show how to make them go away once you were done. I had this vision of being able to popup some sort of child ViewModel with a SignatureWidget in it and collect a signature then close the popup. Can this be done using MvvmCross?
there is a Xamarin Component available.
Is this something that fits your need?
http://components.xamarin.com/view/signature-pad
Regards,
Benjamin