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.
Related
Here is the code that I'm working with and an image which shows the result. This final product has the look that I'm going for, but I think that there must be a better way to do this.
<Page
x:Class="UIFollowAlong.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIFollowAlong"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<Style TargetType="Rectangle"
x:Key="ColorButton">
<Setter Property="Margin" Value="5"/>
<Setter Property="RadiusX" Value="50"/>
<Setter Property="RadiusY" Value="50"/>
</Style>
</Page.Resources>
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
The code in particular that I'm asking the question about is the Ellipse.
<Ellipse x:Name="CenterDot"
Grid.ColumnSpan="2"
Grid.RowSpan="2"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
How can I align the ellipse to the center while ignoring the row and column definitions of the grid? By default, the ellipse goes to 0,0 and gets placed on top of the red rectangle in the top-most left-most grid position.
I tried to place within the page, rather than within the grid, but I think the page can only have one content property?
The picture I showed is exactly the result I wanted I'm just wondering if there is an alternative way to achieve this that does involve spanning multiple row and column definitions.
Thanks!
To have have multiple layers over the same area introduce one more Grid:
<Grid>
<!--layer 0-->
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle x:Name="RedButton"
Grid.Row="0"
Grid.Column="0"
Fill="Red"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="YellowButton"
Grid.Row="0"
Grid.Column="1"
Fill="Yellow"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="GreenButton"
Grid.Row="1"
Grid.Column="0"
Fill="Green"
Style="{StaticResource ColorButton}"/>
<Rectangle x:Name="BlueButton"
Grid.Row="1"
Grid.Column="1"
Fill="Blue"
Style="{StaticResource ColorButton}"/>
</Grid>
<!--layer 1, covers layer 0-->
<Ellipse x:Name="CenterDot"
Fill="Black"
Width="50"
Height="50"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Grid>
Grid with White background and Ellipse are positioned in the same cell of the outer Grid.
To see how Ellipse can cover Rectangles - increase Ellipse size (Height/Width)
Im playing with WPF in Visual Studio, and I have this weird problem. I have made a grid which takes about 50% of the main window. This grid will be a place where my Tetris game takes place. On the other half of window Id like to display labels showing score and so on. But nothing shows up, just the grid content. Does anyone have any idea what might cause this issue ?
Heres my xaml code:
<Window x:Class="Tetris_Final.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:Tetris_Final"
mc:Ignorable="d"
Title="MainWindow" Height="500" Width="500" KeyDown="Window_KeyDown">
<Grid x:Name="GridPlayBoard" Width="255" Height="405
" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,5,0,0">
<Button x:Name="button" Content="Start game!" HorizontalAlignment="Left" Margin="337,148,-177,0" VerticalAlignment="Top" Width="95" Height="48"/>
<Label x:Name="label" Content="Label" HorizontalAlignment="Left" Margin="337,48,-214,0" VerticalAlignment="Top" Width="132" Height="42"/>
</Grid>
Your button and your label are inside your grid. You should make an outer grid to hold all of your elements and put you game board grid inside it. Then use some other kind of grid or panel to control the layout of your buttons and labels.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="GridPlayBoard" Grid.Column="0"
Width="255" Height="405"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5,5,0,0">
<!--put your game here-->
</Grid>
<StackPanel Orientation="Vertical" Grid.Column="1">
<Button x:Name="button" Content="Start game!"
HorizontalAlignment="Left" VerticalAlignment="Top" Width="95" Height="48"/>
<Label x:Name="label" Content="Label" HorizontalAlignment="Left" VerticalAlignment="Top" Width="132" Height="42"/>
</StackPanel>
</Grid>
Update
As an aside, you probably shouldn't specify your style properties inline because it'll lead to a lot of repetition. It would be better to specify them once for the whole window.
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Width" Value="95"/>
<Setter Property="Height" Value="48"/>
</Style>
</Window.Resources>
Better yet, if the same style will be used on multiple windows, use a resource file.
https://learn.microsoft.com/en-us/windows/uwp/controls-and-patterns/resourcedictionary-and-xaml-resource-references
I want to implement toolbox like control in WPF using User controls. I'm able to get the all Titles of UCITems and shown as tabs in UCTab and binded to StackPanel in UCTab using ContentProperty. But I need UCItem childrens also and bind to another stack panel in UCTab.
MainWindow.xaml:
<local:UCTab>
<local:UCItem Title="ToolBox 1">
<StackPanel>
<TextBlock Text="1"></TextBlock>
<TextBlock Text="2"></TextBlock>
<TextBlock Text="3"></TextBlock>
</StackPanel>
</local:UCItem>
<local:UCItem Title="ToolBox 2"></local:UCItem>
<local:UCItem Title="ToolBox 3"></local:UCItem>
</local:UCTab>`
UCTab UserControl
<UserControl x:Class="UserTab.UCTab "
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:UserTab"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
</UserControl.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Border Name="bd" Background="Gray" Panel.ZIndex="50" >
<StackPanel x:Name="host" >
</StackPanel>
</Border>
<Border x:Name="bdCanvas" Grid.Column="1">
<Canvas x:Name="canvas" Background="SkyBlue" >
<StackPanel x:Name="spPanel" Orientation="Vertical" Width="180" >
<Grid Background="Navy">
<Grid.ColumnDefinitions>
<ColumnDefinition ></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock x:Name="tbHeader" Foreground="White" Grid.Column="0" Text="Heading" Margin="3" ></TextBlock>
<Button x:Name="btnPin" Content="P" Margin="3" Grid.Column="1"></Button>
<Button x:Name="btnClose" Content="X" Margin="3" Grid.Column="2"></Button>
</Grid>
<StackPanel x:Name="panelUCItem" >
</StackPanel>
</StackPanel>
</Canvas>
</Border>
</Grid>
UCITem UserCotrol:
<UserControl x:Class="UserTab.UCITem "
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:UserTab"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<Style TargetType="{x:Type UCITem }">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type UCITem }">
<Border Name="Border"
Background="Gray"
Margin="5">
<Button x:Name="tbItem" Padding="5" Width="100" Height="28" Foreground="Black" Content="{Binding Title,UpdateSourceTrigger=PropertyChanged}">
<Button.LayoutTransform>
<RotateTransform Angle="90"></RotateTransform>
</Button.LayoutTransform>
</Button>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
On click of UCItem button, display UCItem content Stackpanel 'panelUCItem' in UCTab.
Help me how I can proceed with this structure. Thanks
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.
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>