how to hide items behind a panel in wpf - c#

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

Related

How to make window transparent when using Frames and Pages?

I have a simple application I'm trying to make.
The idea is to start with a login screen and then move to an admin screen. For this, after looking for answers I stumbled upon Frames and Pages. The problem that I'm having now is that it seems that Pages are not compatible with translucency?
This is what I get when using Frame and Page:
This is what I want to replicate:
This is the main window with pages:
<Window
x:Class="Membership2.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:Membership2"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1366"
AllowsTransparency="True" WindowStyle="None" Background="Transparent"
WindowStartupLocation="CenterScreen">
<Grid>
<Frame x:Name="MainFrame" NavigationUIVisibility="Hidden"/>
</Grid>
</Window>
As you can see, Background property is set to Transparent, but it does nothing. I also tried setting the Grid Background and Frame Background to Transparent without success.
Also, WindowStartupLocation is set to CenterScreen when using Pages, but it also does nothing it seems.
EDIT:
So this problem arises when StartupUri (in App.xaml) is set to my LoginPage.xaml instead of the MainWindow.xaml (described previously).
This is my LoginPage.xaml:
<Page x:Class="Membership2.LoginPage"
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:Membership2"
mc:Ignorable="d"
d:DesignHeight="550" d:DesignWidth="450"
MaxHeight="550" MaxWidth="450"
Title="LoginPage"
RenderOptions.ClearTypeHint="Enabled"
FontFamily="./Resources/Fonts/#Dosis"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"
ShowsNavigationUI="False"
Background="Transparent"
>
<Grid
fw:PointerTracker.Enabled="True" Background="Transparent">
<Border
Background="WhiteSmoke"
CornerRadius="7"
Margin="30, 75, 30, 0">
</Border>
<Ellipse
Width="50"
Height="50"
Fill="WhiteSmoke"
Margin="0,-450,0,0">
</Ellipse>
<materialDesign:PackIcon
Kind="AccountCircle"
Width="150"
Height="150"
VerticalAlignment="Top"
HorizontalAlignment="Center"
Grid.RowSpan="2"
FontSize="50"
Foreground="#7ea4b3"
Grid.Column="1">
</materialDesign:PackIcon>
<Label
Content="Administración"
HorizontalAlignment="Center"
Margin="0,140,0,0"
FontSize="30"
FontFamily="./Resources/Fonts/#Dosis">
</Label>
<TextBox
x:Name="Username"
Width="230"
Height="45"
FontSize="25"
TextWrapping="NoWrap"
Style="{StaticResource MaterialDesignTextBox}"
FontWeight="Light"
RenderOptions.ClearTypeHint="Enabled"
FontFamily="./Resources/Fonts/#Dosis"
Margin="0, 0, 0, 50"
materialDesign:HintAssist.Hint="Usuario">
</TextBox>
<PasswordBox
x:Name="Password"
Width="230"
Height="45"
FontSize="25"
FontWeight="Light"
RenderOptions.ClearTypeHint="Enabled"
Margin="0, 150, 0, 0"
BorderThickness="0,0,0,1"
materialDesign:HintAssist.Hint="Contraseña"
materialDesign:TextFieldAssist.DecorationVisibility="Visible">
</PasswordBox>
<Button
x:Name="Login"
Width="150"
Height="48"
VerticalAlignment="Bottom"
Margin="0,0,0,70"
FontSize="25"
FontWeight="Light"
Background="LightGray"
Style="{StaticResource ButtonRevealStyle}"
BorderThickness="2,2,2,2">
Ingresar
</Button>
</Grid>
</Page>

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">

Windows 10 universal app UserControl in stackpanel

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>

XAML changes without effect

I'm trying to put a textblock in a grid element, but it doesn't display in the debug mode. What do I do wrong? Maybe it's caused that I manipulate the window directly by my C# code?
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="500" ResizeMode="NoResize">
<Window.Background>
<ImageBrush ImageSource="/WpfApplication2;component/Images/Grass0118_22_S.jpg"></ImageBrush>
</Window.Background>
<Grid>
<TextBlock Margin="10,10,0,0" Foreground="White" FontWeight="Bold">Życia:</TextBlock>
<TextBlock Margin="50,10,0,0" Foreground="White" Text="{Binding Text, ElementName=points}"></TextBlock>
</Grid>
</Window>

Try this
<Grid>
<Stackpanel Orientation = "Horizontal">
<TextBlock Margin="10,10,0,0" Foreground="White" FontWeight="Bold">Życia:</TextBlock>
<TextBlock Margin="50,10,0,0" Foreground="White" Text="{Binding Text, ElementName=points}"></TextBlock>
</Stackpanel>
</Grid>

I've already solved my issue.
I had defined a canvas tag in my C# code and it overwrote the XAML changes. I replaced the XAML code to the following
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="500" ResizeMode="NoResize">
<Window.Background>
<ImageBrush ImageSource="/WpfApplication2;component/Images/Grass0118_22_S.jpg"></ImageBrush>
</Window.Background>
<Canvas>
<Grid>
<TextBlock Margin="10,10,0,0" Foreground="White" FontWeight="Bold">Życia:</TextBlock>
<TextBlock Margin="50,10,0,0" Foreground="White" Text="{Binding Text, ElementName=points}"></TextBlock>
</Grid>
<Canvas Name="mycanvas"></Canvas>
</Canvas>
</Window>
and removed the line creating the canvas element from my C# code and everything works now.
Thanks!

Problem setting HorizontalAligment="Stretch" in ListBox's DataTemplate

I want my items in listBox to stretch horizontally, but if item's content is bigger than listbox then horizontal scrollbar appears. How to avoid this?
Xaml:
<Window x:Class="WpfApplication6.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.Resources>
<DataTemplate x:Key="testTemplate">
<Border x:Name="border"
BorderBrush="Black"
BorderThickness="1"
Margin="2"
Padding="2"
HorizontalAlignment="Stretch">
<TextBlock Text="{Binding}" />
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox x:Name="listBox"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource testTemplate}" />
</Grid>
</Window>

Set ScrollViewer.HorizontalScrollBarVisibility to Disabled:
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
...
</ListBox>

Categories