Develop Reference

WPF How can i make a button in "L" form

I would like my button to have the shape of the letter "L" as in this picture Simple Paint Example. The only examples I can find are if you want the button to be round or like a lemon. I know that I need to use template but how exactly I don't understand.
The Code is in the App.xaml for global using.
<!--#region LButton-->
<ControlTemplate x:Key="LButton" TargetType="Button">
<Grid Width="100" Height="100">
<Border BorderThickness="1" Grid.Row="0" Grid.ColumnSpan="2" BorderBrush="Black" Background="LightGreen">
<TextBlock Text="{TemplateBinding Button.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40"/>
</Border>
</Grid>
</ControlTemplate>
<!--#endregion-->
I know i can add CornerRadius="30,30,30,30" that the Button has Rounded Corners.
Thx for your help. Best Regards Shazzar

This can be done by overwriting the Control Template. Here is a very rough example to get you started.
EDIT Updated Path to be L shape
<Button >
<Button.Template>
<ControlTemplate>
<Border>
<Grid>
<Polygon Points="300,200 200,200 200,300 250,300 250,250 300,250" Fill="Purple" />
</Grid>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

Maybe this can help you:
<UserControl x:Class="Test.LButton"
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:Test"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button Name="upButton" Grid.ColumnSpan="3" Grid.RowSpan="1" Margin="0" BorderThickness="0"></Button>
<Button Grid.Row="1" Grid.ColumnSpan="2" Margin="0" BorderThickness="0" Background="{Binding Background, ElementName=upButton}"></Button>
</Grid>
</UserControl>
I created two buttons one is the up part and other for the down part, then I used binding between the two buttons in order to get the same style.
I think that you can not create an LButton using only one button.

Change controls size layout when changing window's size UWP

I would like to make my controls gets bigger with the same margin, It's like giving 10% of the window's size bigger, all controls should be bigger 10% as the window does, they should goes wider if the windows goes too ...etc.
I searched a lot about that and found this topic : https://msdn.microsoft.com/windows/uwp/layout/layouts-with-xaml
but still couldn't know how to make what i want exactly. I don't have many controls they are like 9 only! They are timers, nothing else!
I could do it in Forms or WPF, but in windows UI XAML is blocking so many features, so I can't do it the same way I did for others. That's why I'm trying to find another alternative way to do it.
My Windows Main window WPF (Screenshot):
WPF XAML :
<Page
x:Class="SpecCountdown.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:SpecCountdown"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid x:FieldModifier="public" x:Name="mainGrid" Background="Black" Loaded="Grid_Loaded" HorizontalAlignment="Left" Width="1910">
<TextBlock x:FieldModifier="public" x:Name="playerTxt" Margin="57,66,0,0" TextWrapping="Wrap" Text="PLAYER:" Foreground="#FF0015FF" FontSize="36" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="148"/>
<Border x:FieldModifier="public" x:Name="separator1" Height="1" Margin="43,135,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top" />
<TextBlock x:FieldModifier="public" x:Name="modeTxt" Margin="57,149,0,0" TextWrapping="Wrap" Text="PREP TIME:" Foreground="#FF0015FF" FontSize="42" Height="51" VerticalAlignment="Top" HorizontalAlignment="Left" Width="247"/>
<Border x:FieldModifier="public" x:Name="separator2" Height="1" Margin="43,216,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top"/>
<TextBlock x:FieldModifier="public" x:Name="nextUpTxt" Margin="57,230,0,0" TextWrapping="Wrap" Text="NEXT UP:" Foreground="#FF0015FF" FontSize="36" Height="67" VerticalAlignment="Top" HorizontalAlignment="Left" Width="171"/>
<TextBlock x:FieldModifier="public" x:Name="currPlayerTxt" Margin="0,66,1333,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" TextAlignment="Right" Height="56" VerticalAlignment="Top" HorizontalAlignment="Right" Width="349"/>
<TextBlock x:FieldModifier="public" x:Name="nextPlayerTxt" Margin="228,230,0,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="349" TextAlignment="Right"/>
<TextBlock x:FieldModifier="public" x:Name="timerTxt" Margin="349,153,0,0" TextWrapping="Wrap" Text="0000:00" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="228" TextAlignment="Right"/>
</Grid>
All what I want to make it flexible as well as I change my window's size.

I think that you want to change your controls sizes when the windows sieze change.But the TextBlock's sizes is same as TextBlock's FontSize.For the reason,I use ViewBox that sizes will be same as the Page size.And if you not set the page in Frame,the Page's sizes will as bigger as the windows's sizes.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Viewbox>
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="Foreground"
Value="#FF0015FF"></Setter>
<Setter Property="FontSize"
Value="36"></Setter>
<Setter Property="HorizontalAlignment"
Value="Center"></Setter>
<Setter Property="VerticalAlignment"
Value="Center"></Setter>
<Setter Property="Margin"
Value="10,10,10,10"></Setter>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="PLAYER:"
></TextBlock>
<TextBlock Grid.Column="1"
Text="N/A"></TextBlock>
</Grid>
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="PREP TIME:"></TextBlock>
<TextBlock Grid.Column="1"
Text="0000:00"></TextBlock>
</Grid>
<Grid Grid.Row="2">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="NEXT UP:" ></TextBlock>
<TextBlock Grid.Column="1"
Text="N/A"></TextBlock>
</Grid>
</Grid>
</Viewbox>
</Grid>
http://7xqpl8.com1.z0.glb.clouddn.com/ChangeControlsSizeLayout.gif

Buttons get clipped when I resize the window in WPF

I have a UserControl with MinWidth and MinHeight set.
There a grid and many controls inside.
I have another Grid inside the main grid. The inner grid's code is as below.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<DataGrid Grid.Row="0" helpers:RowHeaderNumber.DisplayRowNumber="True" AutoGenerateColumns="False"
RowHeaderWidth="40" CanUserSortColumns="False" CanUserResizeColumns="False"
Margin="10,65,20,0" ItemsSource="{Binding ExpressionCollection, Mode=TwoWay}"
SelectionUnit="CellOrRowHeader" SelectionChanged="ExpressionGrid_SelectionChanged" PreviewMouseRightButtonUp="ExpressionGrid_PreviewMouseRightButtonUp" BorderBrush="{x:Null}" VerticalAlignment="Top" >
<DataGrid.RowHeaderStyle>
<Style TargetType="DataGridRowHeader">
<Setter Property="ContextMenu" Value="{StaticResource ExpressionContextMenu}"/>
<Setter Property="Padding" Value="4,0,0,20"/>
<Setter Property="Background" Value="#FFF1F0F0"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1,0,1,1"/>
</Style>
</DataGrid.RowHeaderStyle>
</DataGrid>
<Button Grid.Row="1" Content="OK" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Click="Ok_Button_Click" Margin="0,0,112,10"/>
<Button Grid.Row="1" Content="Cancel" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="75" Click="Cancel_Button_Click" Margin="0,0,20,10"/>
</Grid>
The buttons in the bottom get clipped when I resize the window. What changes should I make to make the DataGrid resize when the window is resized?

<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<DataGrid Grid.Row="0"/>
<Button Grid.Row="1" HorizontalAlignment="Left" Content="Button 1"/>
<Button Grid.Row="1" Content="Button 2" HorizontalAlignment="Left" Margin="55,0,0,0"/>
</Grid>
The above code doesnt clip the Buttons.
Remember not to set Width and Height
PS: It will Clip when the Window Width is less than 50 and in such similar cases :) thats obvious :)

Remove the Margin & width from the button. the problem should be. if the width goes less then 75+120 + 75 + 20 it will start clipping the button. I would suggest not to use the width & margin instead use extra row & column in your grid & set it accordingly. also do give min & max height or min & max width to your user control to control it overall.
See the following example
<Window x:Class="Test1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="100" Width="200" MinHeight="100" MinWidth="100">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button Width="50" Margin="20"></Button>
<Button Width="50" Margin="20" Grid.Column="1"></Button>
</Grid>
</Window>
in This example buttons will always clip when you resize & decrease the size of your window.
But if you use it like this it will never clip
<Window x:Class="Test1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="100" Width="200" MinHeight="100" MinWidth="100">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button></Button>
<Button Grid.Column="1"></Button>
</Grid>

How do i make a clickable listbox?

i have a list of users that are bound to a listbox(image and the name of the user) and i want to render this lisbox clickable so whnever i click on a user's image i will be redirected
to his account.
this is the user control that displays the users:
<UserControl x:Class="Navigateur.Presentation.UserControlWork.ListeEnfControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:conv="clr-namespace:Navigateur.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"
mc:Ignorable="d" Height="Auto" Width="Auto"
>
<UserControl.Resources>
<conv:ByteArrayToImageConverter x:Key="bytearraytoImageConverter" />
</UserControl.Resources>
<Grid >
<ListBox x:Name="_imageList" Margin="10,10,10,0" IsSynchronizedWithCurrentItem="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" VerticalAlignment="Top" Height="250" BorderThickness="0" MouseLeftButtonDown="Click_Kid" >
<ListBox.ItemTemplate>
<DataTemplate DataType="Enfant">
<Border CornerRadius="30">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Grid.Row="0" x:Name="image" Source="{Binding avatar}" Width="50" Height="80"/>
<TextBlock Grid.Row="1" x:Name="nom" Text="{Binding prenom}" VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>

Use Button in place of Image and override template of Button to give it an Image look, so that you can have clickable image.
<Button Grid.Row="0" Width="50" Height="80">
<Button.Template>
<ControlTemplate>
<Image x:Name="image" Source="{Binding avatar}"/>
</ControlTemplate>
</Button.Template>
</Button>
If you are using MVVM, you can bind Command with button OR if want to do in code behind you can hook Click event of button to determine which image is clicked on.

Window Style and using controls (C# and WPF)

I'm using Visual Studio 2013 to create my applications. I started to learn programming 4 years ago, and now a days I wanna to improve my programmer experience.
In the last days I had to create a simply application, but I didn't want to use a default style of a window. So I read that I could create a style for my window. I did it, it works fine, but there's a little problem: I can't put anything inside my window now... All the controls I put into a grid, into the window tag, aren't visible, but the compiler doesn't show any problems.
Here is the Style Code, then my Window XAML
<Style TargetType="Window" x:Key="DefaultWindow">
<Setter Property="AllowsTransparency" Value="True"/>
<Setter Property="WindowStyle" Value="None"/>
<Setter Property="ResizeMode" Value="CanResizeWithGrip"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Window}">
<Border BorderThickness="1" BorderBrush="Black">
<Border BorderThickness="3" BorderBrush="#FF244E97">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="#FF244E97">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Grid.Row="0" Stretch="Uniform" HorizontalAlignment="Left" Margin="10">
<TextBlock FontFamily="Corbel" Background="#FF244E97" Foreground="White">Costo Unitario</TextBlock>
</Viewbox>
<Grid Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Viewbox Grid.Column="0" Stretch="Uniform" HorizontalAlignment="Left" Margin="2, 10, 2, 10">
<TextBlock FontFamily="Corbel" Background="#FF244E97" Foreground="White">_</TextBlock>
</Viewbox>
<Viewbox Grid.Column="1" Stretch="Uniform" HorizontalAlignment="Left" Margin="2, 10, 2, 10">
<TextBlock FontFamily="Corbel" Background="#FF244E97" Foreground="White">◘</TextBlock>
</Viewbox>
<Viewbox Grid.Column="2" Stretch="Uniform" HorizontalAlignment="Left" Margin="2, 10, 20, 10">
<TextBlock FontFamily="Corbel" Background="#FF244E97" Foreground="White">X</TextBlock>
</Viewbox>
</Grid>
</Grid>
<Grid x:Name="ContenentGrid" Grid.Row="1" Background="White">
<ResizeGrip Width="10" Height="10" Grid.Column="1" VerticalAlignment="Bottom"/>
</Grid>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And my Windows Xaml:
<Window x:Class="Pabich.Marcin._5HI.CostoUnitario.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:chrt="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
Title="MainWindow" Height="600" Width="800" WindowStartupLocation="CenterScreen"
Style="{StaticResource DefaultWindow}">
<Grid>
<TextBlock>Hello!</TextBlock>
</Grid>
This should be a no-border window, within I can put controls, in the central grid. This is a screen of the window for now:
Screen of the Window
As you can see, I leaved all the white space for my controls, but they aren't there. So how can I make it?
PS: Keep in mind that I'm only a beginner, and I wanna to use simply code

I think that's happens because you don't use ContentPresenter to display window content. Without ContentPresenter WPF content model doesn't know where content should be placed and doesn't show it.
Try to add the ContentPresenter to your ContentGrid (WPF window also requires it in the AdornerDecorator).
<Grid x:Name="ContenentGrid" Grid.Row="1" Background="White">
<AdornerDecorator>
<ContentPresenter Content="{TemplateBinding Content}" />
</AdornerDecorator>
... ResizeGrip here ...
</Grid>