Windows 10 universal app UserControl in stackpanel - c#

I need to place a custom UserControl into a Stackpannel.
I have this UserControl:
<UserControl
x:Class="ScannerApp.Custom_Controls.LocationAndQuantity"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ScannerApp.Custom_Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="20"
d:DesignWidth="400">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100*"/>
<ColumnDefinition Width="80*"/>
<ColumnDefinition Width="100*"/>
</Grid.ColumnDefinitions>
<Border x:Name="border" Background="Red" BorderThickness="1" HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="143">
<TextBlock x:Name="locationTxt" Text="location" HorizontalAlignment="Center"></TextBlock>
</Border>
<TextBlock x:Name="quantityTxt" Text="quantity" Grid.Column="2" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top"/>
</Grid>
</UserControl>
and a page with stackpanel
<Page
x:Class="ScannerApp.FindPN___STEP2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ScannerApp"
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}">
...
<StackPanel>
<!--here I want to place the userControls-->
</StackPanel>
</Grid>
</Page>
I tried some sollutions like <controls: ...> //this could not be found by intellisense even or
<my:UserControlName Grid.Column="2" Grid.Row="2" ... />
<Window ...
xmlns:my="clr-namespace:AssemblyName"
...
/>
but I don't have the Window here... I tried to place something similar into the Page, but I don't really know what to type in there.


As said in comments, you've to fix your XAML. If you want to use custom controls you've to tell the compiler where the controls come from.
In case you Controls namespace is
ScannerApp.Custom_Controls
You've to write the Page XAML as
<Page
x:Class="ScannerApp.FindPN___STEP2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ScannerApp.Custom_Controls" <!--FIXED HERE-->
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}">
...
<StackPanel>
<local:NameOfYourControl x:Name="MyNewControl" /> <!--Properties can be added-->
</StackPanel>
</Grid>
</Page>

Related

C# wpf get rid of margin on top

I am making a mainWindow, the code is as below.
<Window x:Class="ConfigUI.Views.MainUIView"
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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:local="clr-namespace:ConfigUI.Views"
mc:Ignorable="d"
Title="MainUIView" Height="450" Width="800"
FontFamily="Segoe UI" FontSize="14"
WindowStartupLocation="CenterScreen" WindowStyle="None"
>
<DockPanel>
<DockPanel DockPanel.Dock="Top" Margin="0">
<Image Source="..\Assets\logo.png"
Width="50" DockPanel.Dock="Left"
/>
<StackPanel DockPanel.Dock="Right">
<Button FontFamily="Segoe MDL2 Assets" FontSize="24"
Content="" Width="50" Height="50" />
</StackPanel>
<TextBlock Text="My Cloud" FontSize="24" FontWeight="Bold"
HorizontalAlignment="Center" VerticalAlignment="Center"
/>
</DockPanel>
<Grid DockPanel.Dock="Bottom"></Grid>
</DockPanel>
</Window>
But when I run it, it always shows a little gap on the top that I can't get rid of it.
My question is how to remove the gap on the top of the window? Thanks.

(Solution 1) This way you will loose drop shadow.
You just set AllowsTransparency="True" in your Window Code. This will remove visible border from window.
<Window x:Class="ConfigUI.Views.MainUIView"
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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:local="clr-namespace:ConfigUI.Views"
mc:Ignorable="d"
Title="MainUIView" Height="450" Width="800"
FontFamily="Segoe UI" FontSize="14"
WindowStartupLocation="CenterScreen" WindowStyle="None"
AllowsTransparency="True">
</Window>
(Solution 2) Drop shadow will intact.
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="0" ResizeBorderThickness="5" />
</WindowChrome.WindowChrome>
Full Codes
<Window x:Class="SOWPF.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:SOWPF"
mc:Ignorable="d" WindowStyle="None"
Title="MainWindow" Height="450" Width="800">
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="0" ResizeBorderThickness="5" />
</WindowChrome.WindowChrome>
</Window>
Tip*
Add ResizeMode="CanResize"

Try this:
<DockPanel VerticalAlignment="Top">
or this
<DockPanel Margin="0,-4,0,0">

Error XDG0008: NumberBox is not supported in a Universal Windows Platform project

There is a strange problem with the following code:
<Page
x:Class="FuckNumberBox.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FuckNumberBox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<NumberBox x:Name="BeginNumberBox"
Header="Enter an integer:"
Value="1"
SpinButtonPlacementMode="Compact"
SmallChange="10"
LargeChange="100"/>
</Grid>
</Page>
After creating the project, no changes were made until I added the <NumberBox>. There will be raised three compilation errors:
I try update NuGet Package:
But the error still here.
How can I repair this?
I could really need some help here :/
Development environment:
IDE: Visual Studio 2019
UWP project target version: Windows 10, version 1903(10.0; Build
18362)
UWP project min version: Windows 10, version 1903(10.0; Build 18362)

From this document of NumberBox, you can see that the NumberBox is under the Microsoft.UI.Xaml.Controls namespace and applies to WinUI. So as #magicandre1981 said, you need to install Microsoft.UI.Xaml nuget package and add the Windows UI (WinUI) Theme Resources to your App.xaml resources. Then add the namespace in xaml to use it.
App.xaml:
<Application ...>
<Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
</Application.Resources>
</Application>
.xaml:
<Page
x:Class="FuckNumberBox.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FuckNumberBox"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
xmlns:controls="using:Microsoft.UI.Xaml.Controls">
<Grid>
<controls:NumberBox x:Name="BeginNumberBox"
Header="Enter an integer:"
Value="1"
SpinButtonPlacementMode="Compact"
SmallChange="10"
LargeChange="100"/>
</Grid>
</Page>

Create the customControl
<UserControl x:Class="GroceryPriceTracker.Controls.NumberBoxControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GroceryPriceTracker.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<UserControl.Resources>
<x:Double x:Key="CWidth">35</x:Double>
</UserControl.Resources>
<Grid Height="{StaticResource CWidth}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBox InputScope="Number" BorderThickness="1"
Loaded="TextBox_Loaded"
Padding="10,6,10,0"
Height="35"
Style="{StaticResource TextBoxStyleBlack}"></TextBox>
<Grid Grid.Column="1"
BorderBrush="{ThemeResource InkToolbarAccentColorThemeBrush}"
BorderThickness="1"
Width="{StaticResource CWidth}"
Height="{StaticResource CWidth}">
<Button Width="{StaticResource CWidth}"
Height="{StaticResource CWidth}"
Grid.Column="1"
BorderThickness="0"
Background="Transparent">
<FontIcon FontSize="17"
FontFamily="Segoe MDL2 Assets"
Glyph="" />
</Button>
</Grid>
<Grid Grid.Column="2"
Margin="-5,0,0,0"
BorderBrush="{ThemeResource InkToolbarAccentColorThemeBrush}"
BorderThickness="1"
Width="{StaticResource CWidth}"
Height="{StaticResource CWidth}">
<Button Width="{StaticResource CWidth}"
Height="{StaticResource CWidth}"
BorderThickness="0"
Background="Transparent"
Grid.Column="2">
<FontIcon FontSize="17"
FontFamily="Segoe MDL2 Assets"
Glyph="" />
</Button>
</Grid>
</Grid>
</UserControl>

XML DataTemplate Binding MultiLayer UserControl

I'm building an app in which I have created a UserControlthat has a second UserControl inside of it.
Here is the first UserControl:
<UserControl x:Class="TasksMonitor.CustomControls.TaskCardBtn"
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:TasksMonitor.CustomControls"
mc:Ignorable="d"
Name="TaskCardBtnCustomControl"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../CustomButtonsStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style TargetType="ToolTip"></Style>
</ResourceDictionary>
</UserControl.Resources>
<Button Click="OnButtonClick" Style="{DynamicResource FlatCntrlBtn}">
<Grid Width="{Binding ActualWidth, ElementName=TaskCardBtnCustomControl}" VerticalAlignment="Center" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1"/>
<ColumnDefinition Width="15"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
</Grid.RowDefinitions>
<Canvas Margin="4,10,0,0" Grid.Column="1">
<Ellipse Width="15" Height="15" Fill="{Binding Path=StatusColor, ElementName=TaskCardBtnCustomControl, FallbackValue=#FFFFFF}"/>
</Canvas>
<TextBlock VerticalAlignment="Center" x:Name="BtnTitle" Grid.Column="3" Text="{Binding Path=BtnText, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"/>
</Grid>
</Button>
</UserControl>
That UserControl is inside of this UserControl:
<UserControl x:Class="TasksMonitor.CustomControls.TaskCardUserControl"
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:TasksMonitor"
xmlns:ut="clr-namespace:TasksMonitor.Utils"
xmlns:cc="clr-namespace:TasksMonitor.CustomControls"
Name="TaskCardUC"
mc:Ignorable="d"
Margin="5"
d:DesignHeight="35" d:DesignWidth="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary x:Name="Icons" Source="../Resources/Icons.xaml" />
</ResourceDictionary.MergedDictionaries>
<ut:StatusToColorConverter x:Key="StatusToColor"/>
</ResourceDictionary>
</UserControl.Resources>
<Grid Width="auto">
<Grid Background="#2B2B2B">
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<cc:TaskCardBtn StatusColor="{Binding TskStatus, Converter={StaticResource StatusToColor}}" BtnText="{Binding Path=StuffYeah, ElementName=TaskCardUC}" x:Name="ExpandCollapseBtn" BtnClick="GridContentControl_Expand"/>
</Grid>
<Grid Grid.Row="1" Background="#2B2B2B" Name="GridContent" >
<UserControl Margin="10" Loaded="GridContentControl_Loaded">
</UserControl>
</Grid>
</Grid>
</Grid>
</UserControl>
The second UserControl or Parent UserControl is being used in a DataTemplate:
<Grid.Resources>
<DataTemplate x:Key="itemTemplate">
<cc:TaskCardUserControl StuffYeah="{Binding BtnTxt}"/>
</DataTemplate>
</Grid.Resources>
When I set the Bind to BtnTxt as illustrated in the DataTemplate above it does not work and says that it can't find 'BtnTxt' in object TaskCardUserControl. I feel that this is a binding issue as I have a property from the first UserControl bound to the parent property and then that parent property bound to the DataTemplate. I'm very new to DataTemplates and UserControl in general, would someone be able to point me in the correct direction?
Thanks in advance.

I figured this out...I was setting this.DataContext = this in the code which was actually old code. Once I commented this out everything works as it should. Thanks for the help.

how to hide items behind a panel in wpf

i used the following code for control display
<Window x:Class="WpfApplication29.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 >
<Border Margin="100" BorderThickness="3" BorderBrush="Black">
<Canvas>
<Label Content="This is test" FontSize="129" Width="400" Height="200"/>
</Canvas>
</Border>
</Grid>
</Window>
I want to display it as the 2nd one which is cut from below if its size is greater then the parent control or if margin is negative

You just need to use ClipToBounds="True" properties for your border
<Grid >
<Border Margin="100" BorderThickness="3" BorderBrush="Black" ClipToBounds="True">
<Canvas >
<Label Content="This is test" FontSize="129" Width="400" Height="200"/>
</Canvas>
</Border>
</Grid>

Just use ClipToBounds property of Canvas to True
<Window x:Class="WpfApplication29.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 >
<Border Margin="100" BorderThickness="3" BorderBrush="Black">
<Canvas ClipToBounds="True">
<Label Content="This is test" FontSize="129" Width="400" Height="200"/>
</Canvas>
</Border>
</Grid>
and you get the Result like this

Only see the first referenced UserControl

How it is possible that only the first UserControl ni the WindowsFormsHost is shown in the GUI while the seconde one is still hidden?
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wf_zoom0="clr-namespace:LowLightGrab;assembly=LowLightGrab"
xmlns:wf_zoom1="clr-namespace:LowLightGrab;assembly=LowLightGrab"
Title="MainWindow" Height="350" Width="525">
<Grid>
<WindowsFormsHost Height="154" HorizontalAlignment="Left" Name="wf_zoom0" VerticalAlignment="Top" Width="215" >
<wf_zoom0:UserControl1/>
</WindowsFormsHost>
<WindowsFormsHost Height="161" HorizontalAlignment="Left" Margin="251,138,0,0" Name="wf_zoom1" VerticalAlignment="Top" Width="223" >
<wf_zoom1:UserControl1/>
</WindowsFormsHost>
</Grid>

Other than removing the margin as Eran added, You should add Rows to the Grid and place each of the elements in its own row, something lile this:
<Window x:Class="ComboboxRectangles.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">
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wf_zoom0="clr-namespace:LowLightGrab;assembly=LowLightGrab"
xmlns:wf_zoom1="clr-namespace:LowLightGrab;assembly=LowLightGrab"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.RowDefinitions>
<WindowsFormsHost Grid.Column="0" Height="154" HorizontalAlignment="Left" Name="wf_zoom0" VerticalAlignment="Top" Width="215" >
<wf_zoom0:UserControl1/>
</WindowsFormsHost>
<WindowsFormsHost Grid.Column="1" Height="161" HorizontalAlignment="Left" Margin="251,138,0,0" Name="wf_zoom1" VerticalAlignment="Top" Width="223" >
<wf_zoom1:UserControl1/>
</WindowsFormsHost>
</Grid>
</Window>

Categories