Content property is set more than once - xaml

I'm trying to add a title to my xaml page, in the small space above the 4x4 grid, but when i try to add the label, it says content is set more than once.
here is my code:
<Window x:Class="WpfApplicationAssignmentgood.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Name="mainGrid" Margin="0,56,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
<Label Content="Hello" HorizontalAlignment="Center", VerticalAlignment="Center" FontFamily="Arial Black" FontSize="24" />
</Window>

Your Window can only contain one child. In your case, your Window contains a Grid, and a Label.
Ensure that your Window only has one child, you can achieve this by placing your Label inside a Grid. Something like this:
<Window ... >
<Grid>
<Grid ...>
...
</Grid>
<Label Content="Hello" ... />
</Grid>
</Window>

Related

Image does not display in WinUI3 XAML

I am trying to add a picture to my Window in WinUI3 and the image is never rendered. When checking in the live visual tree, the actual size of the image is 0 even though its width and height are set to 200px. Can someone tell me what's wrong with my XAML ?
<Window
x:Class="ClientWinUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ClientWinUI"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
>
<Grid Background="#FF494A51">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="1*" />
<RowDefinition Height="2*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Image Stretch="Fill" Width="200" Height="200" Source="Images/logo.png"/>
</Grid>
</Window>
Found the bug. I was debugging the package itself and I needed to add the image to the assets found in the package.

Draw cirle to fit grid in xaml

I have this grid:
<UserControl
x:Class="Test.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Background="#FF341616">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Ellipse
Name="Red"
Grid.Row="0"
Margin="10,10,10,10"
Grid.Column="0"
Fill="#73b43c"/>
</Grid>
</UserControl>
but when it scales, it distortes.
How can I fix it? I don't want to replace it with an image.
If you want something to scale without distorting, put it inside of a Viewbox:
<Viewbox Grid.Row="0" Grid.Column="0" Margin="10,10,10,10">
<Ellipse Name="Red" Width="100" Height="100" Fill="#73b43c"/>
</Viewbox>
The Stretch property of the Viewbox can be set various values, depending on how you want the content to stretch. You probably want Uniform, which would look like this:

Wrap panel hiding on vertical screen resize

Hey so I have a question that's been driving me mad. Basically I have a xaml element that has a wrap panel and a listbox inside it. The listbox has no problems in resizing but the wrap panel will not resize even when I set the horizontal alignment to stretch.
Has anyone any suggestions on how to fix this as it is really driving me nuts? Thanks very much in advance.
<UserControl x:Class="citeright_word.SearchItemsPanel"
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="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:local="clr-namespace:citeright_word"
xmlns:iconPacks1="http://metro.mahapps.com/winfx/xaml/iconpacks"
mc:Ignorable="d"
d:DesignHeight="562.5" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../Resources/Styles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label x:Name="label" Content="Search:" Margin="5,0,0,0"
VerticalAlignment="Top" FontSize="16" FontWeight="Bold"/>
<WrapPanel HorizontalAlignment="Stretch" Width="auto"
Margin="5,30,5,506.4">
<Button Click="refreshItems" Background="#FFF7F7F7"
VerticalAlignment="Top">
<iconPacks1:PackIconMaterial Kind="Refresh" MaxHeight="12"
MaxWidth="12"/>
</Button>
<TextBox x:Name="textBox" controls:TextBoxHelper.Watermark="Search
Items" controls:TextBoxHelper.ClearTextButton="True"
VerticalAlignment="Top"
KeyDown="textBox_KeyDown" />
</WrapPanel>
<ListBox x:Name="listBox" Margin="5,63,5,5"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</ListBox>
</Grid>
</UserControl>
Is this what you're looking for?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label
x:Name="label"
Grid.Row="0"
Content="Search:"
Margin="5,0,0,0"
VerticalAlignment="Top"
FontSize="16"
FontWeight="Bold"
/>
<Grid
Margin="5"
Grid.Row="1"
>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button
Grid.Column="0"
Click="refreshItems"
Background="#FFF7F7F7"
VerticalAlignment="Top"
>
<iconPacks1:PackIconMaterial
Kind="Refresh"
MaxHeight="12"
MaxWidth="12" />
</Button>
<TextBox
Grid.Column="1"
Margin="2,0,0,0"
x:Name="textBox"
VerticalAlignment="Top"
KeyDown="textBox_KeyDown"
controls:TextBoxHelper.Watermark="Search Items"
controls:TextBoxHelper.ClearTextButton="True"
/>
</Grid>
<ListBox
x:Name="listBox"
Grid.Row="2"
Margin="5"
HorizontalContentAlignment="Stretch"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBoxItem>DSG Global Inc (re)</ListBoxItem>
<ListBoxItem>Law Society of New Brunswick v. Aucoin</ListBoxItem>
</ListBox>
</Grid>
I made some substitutions for testing because I don't have your icons or your textbox behaviors or the stuff that goes in the listbox.
I find it deeply incongenial to do XAML layout with margins. I know the designer positions elements that way, but I only use the designer for a visual check on the XAML I write by hand. I find it vastly easier and more powerful to use Grid rows and columns, stackpanels, wrappanels, and the odd UniformGrid. I don't think it's just me: On stack overflow, I've noticed that margin-driven layout correlates very well with folks who are inexperienced with XAML.

Creating responsive element in XAML

I am absolutely new in UWP and its responsive design, so I need help.
Where's the problem?
e.g. I need 4 responsive buttons on landing page, but in each view it looks quite the same. So the button doesn't change, but looks same on desktop, and same on the phone emulator (or when I change screen resolution). For better description, there are some screens:
Buttons on large 23" screen - looks good, but...
..buttons on small 5" screen (portrait) - buttons are larger then canvas...
So my question is: How to make buttons responsive?
Here is my sourcecode:
<Page
x:Class="STCApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:STCApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="83*"/>
<RowDefinition Height="998*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="button" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Background="#33DCFF00"></Button>
<Button x:Name="button_Copy" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="1" Background="#33FF0000"/>
<Button x:Name="button_Copy1" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="2" Background="#3300FF0C"/>
<Button x:Name="button_Copy2" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="3" Background="#330080FF"/>
</Grid>
</Page>
For responsive design, we'd better avoid using fixed width and height. We can remove Width and Height setting in Button and set it's HorizontalAlignment and VerticalAlignment to Stretch like following to make the button responsive.
<Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" />
In this scenario, each button will occupy a cell in the grid and their width and height will change automatically according to the size of the gird. Following is a complete sample and for more info about the layout design, please see Layout for UWP apps.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="83*" />
<RowDefinition Height="998*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" />
<Button x:Name="button_Copy" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33FF0000" Content="Button" />
<Button x:Name="button_Copy1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#3300FF0C" Content="Button" />
<Button x:Name="button_Copy2" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#330080FF" Content="Button" />
</Grid>
In this case it's better for you to use a RelativePanel which you can handle with Visual States that will change according to the available screen size. This might help
Windows 10 RelativePanel Sample

Custom Windows Phone user control

I'm developing a custom ListBox item template and so far wrote this code:
<UserControl x:Class="Application.Test"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Right" Height="100" Grid.RowSpan="2" Grid.Column="1" VerticalAlignment="Center" Width="100" Source="ControlTemplates\arrow_white.png"/>
<TextBlock Name="Title" TextWrapping="Wrap" Grid.Row="1" Grid.Column="0" Height="auto" Width="auto" Grid.ColumnSpan="2" Margin="10,212,119,214"/>
</Grid>
Link to picture sample: http://s7.postimg.org/oeyl8gge3/Capture2.png
I want to make this ListBoxItem 200 px, but all content - rubber ( to support both orientations )
When i try to change d:DesignHeight="480" d:DesignWidth="480" to 200px it makes the ListBoxItem 200px but text dissapers...
What am i doing wrong?
You need to reverse the column definitions:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
This way right column will have fixed size since it is automatically resized to accommodate the Image control with fixed width. And the first column will now always stretch to use all space.
However, this is not enough. Each individual list box item has its own width. To ensure that each item has maximum width, use the following code:
<ListBo>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>
</ListBox>