I'm trying to create an application which is supposed to measure quick reaction performance of it's user. The application starts up in full-screen mode and resizes it's elements accordingly to the screen resolution. The project was strongly inspired by training_aim_csgo2 map.
It's mostly done, but here is the problem:
I put the Label counters inside StackPanel, but outside of Canvas, which prevents the user from clicking on the target if it shows up visually on the StackPanel area (while in fact the target is below it).
Here is the XAML:
<Grid>
<Canvas Name="Canvas" Background="#EFECCA">
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent">
</DockPanel>
<Button Width="50" Height="50" x:Name="button" Style="{DynamicResource buttonStyle}" TouchDown="button_TouchDown" Click="button_Click" Panel.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />
</Canvas>
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<Label x:Name="counter_SUCCESS" Content="000" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_FAILURE" Content="000...clicks missed" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_NUMBER" Content="0 out of 100" HorizontalContentAlignment="Center" Foreground="#046380" />
</StackPanel>
<Button Content="Start" Width="{Binding}" Height="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" TouchDown="Start_TouchDown" Click="Start_Click" x:Name="Start"/>
</Grid>
Could someone help me solve this issue, please?
What I attempted to do so far was to move the StackPanel inside the Canvas and set it's Z-index value to 1 but then it disobeyed HorizontalAlignment and VerticalAlignment settings:
I have also tried to drop the whole StackPanel idea and set positions and Z-indexes of the Label counters programmatically, like so:
counter_SUCCESS.Width = rectangleWidth;
counter_FAILURE.Width = rectangleWidth;
counter_NUMBER.Width = rectangleWidth;
counter_SUCCESS.Height = rectangleHeight / 3;
counter_FAILURE.Height = rectangleHeight / 3;
counter_NUMBER.Height = rectangleHeight / 3;
Canvas.SetLeft(counter_SUCCESS, (ActualWidth - counter_SUCCESS.Width) / 2);
Canvas.SetLeft(counter_FAILURE, (ActualWidth - counter_FAILURE.Width) / 2);
Canvas.SetLeft(counter_NUMBER, (ActualWidth - counter_NUMBER.Width) / 2);
Canvas.SetTop(counter_SUCCESS, 0);
Canvas.SetTop(counter_FAILURE, rectangleHeight/3);
Canvas.SetTop(counter_NUMBER, rectangleHeight/3 + counter_FAILURE.Height);
It appeared fine on my screen but on a different one the Labels were overlapping:
If you don't want any input or hit testing on a certain element you should set the IsHitTestVisible property to false:
<Grid>
<Canvas Name="Canvas" Background="#EFECCA">
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent">
</DockPanel>
<Button Width="50" Height="50" x:Name="button" Style="{DynamicResource buttonStyle}" TouchDown="button_TouchDown" Click="button_Click" Panel.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />
</Canvas>
<StackPanel IsHitTestVisible="False" HorizontalAlignment="Center" VerticalAlignment="Top">
<Label x:Name="counter_SUCCESS" Content="000" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_FAILURE" Content="000...clicks missed" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_NUMBER" Content="0 out of 100" HorizontalContentAlignment="Center" Foreground="#046380" />
</StackPanel>
<Button Content="Start" Width="{Binding}" Height="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" TouchDown="Start_TouchDown" Click="Start_Click" x:Name="Start"/>
You simply need to re-order your elements.
<Grid Background="#EFECCA">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Top">
<Label x:Name="counter_SUCCESS" Content="000" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_FAILURE" Content="000...clicks missed" HorizontalContentAlignment="Center" Foreground="#046380" />
<Label x:Name="counter_NUMBER" Content="0 out of 100" HorizontalContentAlignment="Center" Foreground="#046380" />
</StackPanel>
<Canvas Name="Canvas" Background="Transparent">
<DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Width="{Binding ActualWidth, ElementName=Canvas}" Height="{Binding ActualHeight, ElementName=Canvas}" MouseLeftButtonDown="DockPanel_MouseLeftButtonDown" TouchDown="DockPanel_TouchDown" Panel.ZIndex="2" Background="Transparent">
</DockPanel>
<Button Width="50" Height="50" x:Name="button" Style="{DynamicResource buttonStyle}" TouchDown="button_TouchDown" Click="button_Click" Panel.ZIndex="3" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />
</Canvas>
<Button Content="Start" Width="{Binding}" Height="{Binding}" VerticalAlignment="Bottom" HorizontalAlignment="Center" TouchDown="Start_TouchDown" Click="Start_Click" x:Name="Start"/>
</Grid>
Setting the Grid to have the background, then placing the StackPanel over that, you can put the Canvas on top of everything and set it's Background to Transparent.
Related
I'm using the Material Design in a WPF XAML application, I've got this section of code bellow, when the grid is outside of a "materialDesign:Flipper" it all renders correctly; ie- it grows/stretch's correctly with the size of the window and it stacks nicely inside of the StackPanel.
However, as soon as I place this code inside of a Flipper, the scaling and positioning becomes skewed. If I start to change the size of the window it will resize funnily and will not stack nicely. Please see both the image and video bellow for more info. Thank you.
Please note all this code is contained within side a "StackPanel", the intention is such that they can be copied and pasted multiple times.
Working Code outside a Flipper:
<Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
Broken Code, inside a Flipper:
<materialDesign:Flipper Visibility="{Binding IsVisible}" Background="#FFE89595" HorizontalAlignment="Stretch">
<materialDesign:Flipper.FrontContent>
Grid Height="89">
<Grid Width="77" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7,3,0,2" Panel.ZIndex="2" Height="84">
<Ellipse Fill="{Binding Colour}" HorizontalAlignment="Left" Height="77" StrokeThickness="3" Stroke="#FF464646" Width="77" Effect="{DynamicResource MaterialDesignShadowDepth2}" />
<TextBlock Text="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" TextAlignment="Center" Width="90" FontSize="{Binding FontSize}" Foreground="White" />
</Grid>
<UniformGrid Rows="2" Columns="1" Panel.ZIndex="3" Margin="89,18,72,0">
<TextBox TextWrapping="Wrap" Text="{Binding BrandName}" FontSize="24" Grid.ColumnSpan="1"/>
<Label Content="Brand Name" Grid.ColumnSpan="1" Grid.RowSpan="2" Margin="-2,-3,2,3"/>
</UniformGrid>
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" HorizontalAlignment="Right" Panel.ZIndex="4" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}" Margin="0,25,19,24"/>
<materialDesign:Card Margin="24,0,5,5" VerticalAlignment="Bottom" Height="72" Panel.ZIndex="-1" />
</Grid>
</materialDesign:Flipper.FrontContent>
<materialDesign:Flipper.BackContent>
<Grid Height="200" Background="{Binding BackColour}">
<Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" Content="{materialDesign:PackIcon DotsHorizontal}" Command="{x:Static materialDesign:Flipper.FlipCommand}"/>
</Grid>
</materialDesign:Flipper.BackContent>
</materialDesign:Flipper>
Example Image of render
YouTube Video Demonstration - The one highlighted in red is flipper.
Thank you for any help.
I am trying to make an image stretch to fit the screen with preserverd aspect ratio. I thought this code would do the trick:
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenHeight}" Stretch="Uniform" StretchDirection="Both"/>
Regretably it seems like the image just fits to the width of the screen and crops it at the bottom.
The complete xaml code looks like this:
enter co<Window x:Class="ImageExplorer.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:ImageExplorer"
mc:Ignorable="d"
Title="MainWindow" WindowState="Maximized" Background="Black">
<StackPanel>
<Border BorderBrush="Black" BorderThickness="2">
<Grid Margin="0,0,0,0">
<Button Content="open" Click="OpenImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="1,1,1,1" />
<Button Content="Prev." Click="GetPreviousImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="120,1,1,1"/>
<Button Content="Next" Click="GetNextImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="180,1,1,1" />
<Label Content="Fil:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="120" Height="30" Margin="1,1,300,1"/>
<TextBlock Name="StiViser" HorizontalAlignment="Right" VerticalAlignment="Center" Width="298" Margin="1,1,1,1" TextWrapping="Wrap" Text="TextBlock"/>
</Grid>
</Border>
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenWidth}" Stretch="Uniform" StretchDirection="Both"/>
</StackPanel>
Use DockPanel instead
<DockPanel LastChildFill="True">
<Border DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2">
<Grid Margin="0,0,0,0">
<Button Content="open" Click="OpenImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="1,1,1,1" />
<Button Content="Prev." Click="GetPreviousImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="120,1,1,1"/>
<Button Content="Next" Click="GetNextImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="180,1,1,1" />
<Label Content="Fil:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="120" Height="30" Margin="1,1,300,1"/>
<TextBlock Name="StiViser" HorizontalAlignment="Right" VerticalAlignment="Center" Width="298" Margin="1,1,1,1" TextWrapping="Wrap" Text="TextBlock"/>
</Grid>
</Border>
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenWidth}" Stretch="Fill" StretchDirection="Both"/>
</DockPanel>
I'm getting such error
The name 'ScoreBtn' does not exist in the current context
and
The name 'LvlBttn' does not exist in the current context
on c# side but I can get text of Label x:Name="Lines". Where is mistake and how can I fix it?
Thanks for any help,
</Window.Resources>
<DockPanel LastChildFill="false">
<Button DockPanel.Dock="Right" Visibility="Hidden" Width="300">Right</Button>
<StackPanel DockPanel.Dock="Right" Width="311" >
<Button x:Name="btnPlay" Content="Play" Click="btnPlay_Click" Width="50" Height="25" Margin="5"/>
<Button x:Name="Score" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label x:Name="ScoreBtn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8" Content="Score"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Button x:Name="level" HorizontalAlignment="Left" VerticalAlignment="Top" Height="90" Margin="0,20,0,0" Width="170" Click="buttonPlay_Click" >
<Button.Template>
<ControlTemplate TargetType="Button">
<Grid>
<Image Name="img1" Source="Images/play.png" Stretch="Fill" />
------------------->> <Label Content="Level 1" x:Name="LvlBttn" FontFamily="Bradley Hand ITC" HorizontalAlignment="Center" FontSize="22" VerticalAlignment="Center" Opacity="0.8"/>
</Grid>
</ControlTemplate>
</Button.Template>
</Button>
<Label Visibility="Hidden" Content="Lines " Height="56" x:Name="Lines" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Margin="0,0,0,0"/>
This will get you the Label for the button named Score. "ScoreBtn"is the name of the label element. It's not as complicated as I thought it would be.
var label = (Label)Score.Template.FindName("ScoreBtn", Score);
You really ought to listen to Peter Duniho, write a viewmodel, and bind the label's Content property to a viewmodel property, but if you don't already have a viewmodel, you may not want to rewrite your entire project. Since you don't have a single Binding in your XAML, I imagine that might be the case.
In my ContentDialog. On focus any element, type TextBox, the keyboard appear. When Keyboard appear, have a big margin above( so 20-30 px maybe). This space is the same height of the space allocated for Primary and Secondary Buttons. If have this margin, my content have a scrollbar and I do not want it. I have space sufficient to show all content of my dialog if remove this margin/padding of course.
This topic is related with: ContentDialog Windows 10 Mobile XAML - FullScreen - Padding
<StackPanel Orientation="Horizontal">
<TextBox x:Name="txtUser" IsSpellCheckEnabled="False"
Background="Black" Foreground="Red BorderBrush="Red" BorderThickness="1"
PlaceholderText="Digit your username"
GotFocus="txtUser_GotFocus" Style="{StaticResource TextBoxStyle}"
TextChanged="txtUser_TextChanged"
/>
<Button x:Name="MakeOff"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
<HyperlinkButton x:Name="btnRegisterTwo"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Margin="0"
NavigateUri="www.google.pt"
Style="{StaticResource HyperLinkButtonStyleMobile}"
Content="Register">
<HyperlinkButton.ContentTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</HyperlinkButton.ContentTemplate>
</HyperlinkButton>
<Button x:Name="MakeOffThree"
Height="32" BorderThickness="1"
HorizontalAlignment="Center"
Foreground="Red" Background="Black"
Style="{StaticResource ButtonStyle}"
Margin="0">
</StackPanel>
</Grid>
Someone help to remove this?
Thanks
Interestingly, the ContentScrollViewer inside the style is given a fixed height during run-time, and a hack is to remove this x:Name from the ScrollViewer.
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled" Margin="{ThemeResource ContentDialogContentScrollViewerMargin}" IsTabStop="False">
Also, you will need to add the RowDefinitions back to the root panel LayoutRoot in the style.
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
In my WPF application, i created a dockpanel with a stackpanel with orientation=horizontal.
I add some buttons on my stackpanel ( like a toolbar)
I would like to be able to set my last item on my stackpanel to be attached to the right of my window.
Some picture in order to explain.
What i have :
What i would to have :
Here is my XAML :
<DockPanel Height="40" VerticalAlignment="Top" >
<Border>
<StackPanel Orientation="Horizontal" Background="{StaticResource DegradeCouleurTheme}">
<Image Source="ElipseGauche.png" Height="28" Margin="10,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Premier">
<Image Source= "xRtDiva_XWPF_TBR_PREMIER.PNG_IMAGES.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Precedent">
<Image Source= "xRtDiva_XWPF_TBR_PRECED.PNG_IMAGES.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Suivant">
<Image Source= "xRtDiva_XWPF_TBR_SUIVANT.PNG_IMAGES.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Goto_Dernier">
<Image Source= "xRtDiva_XWPF_TBR_DERNIER.PNG_IMAGES.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Creer" >
<Image Source= "Toolbar_Creer.png" Height="16" />
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Supprimer">
<Image Source= "Toolbar_Supprimer.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Joints">
<Image Source= "Toolbar_FicJoints.png" Height="18"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Annuler" >
<Image Source= "Toolbar_Annuler.png" Height="16"/>
</Button>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_Evenement_Valider">
<Image Source= "Toolbar_Valider.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_App_Parametrer" >
<Image Source= "Toolbar_Parametrer.png" Height="16"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
<Grid HorizontalAlignment="Right">
<StackPanel Orientation="Horizontal" Height="28" >
<Image Source="ElipseGauche.png" Height="28" Margin="15,0,0,0" />
<StackPanel Orientation="Horizontal" Height="28">
<StackPanel.Background>
<ImageBrush ImageSource="ElipseMilieu.png"></ImageBrush>
</StackPanel.Background>
<Button Template="{StaticResource BoutonRessourcesTpl}" Click="Button_Click_About" >
<Label Margin="0,0,0,1" Foreground="White" Content="About" Height="16" VerticalAlignment="Center" HorizontalAlignment="Center" Padding="0,0,0,0"/>
</Button>
</StackPanel>
<Image Source="ElipseDroite.png" Height="28" Margin="0,0,0,0" />
</StackPanel>
</Grid>
</StackPanel>
</Border>
</DockPanel>
I tried to use a grid with horizontalaligneemnt = right on the last item of my stackpanel but it has no effect ( and it's logic !)
Anyone could help me please ?
Thanks a lot :)
You can not do this with a StackPanel. You will need to use a DockPanel or Grid instead.
You can use Grid and Grid children to attack Objecs on the direction: Left, Right, Tip, Bottom and Center.
I did a example with two images on Bottom left and Bottom right:
<Window x:Class="NameClass">
<Grid Name="Grid 1">
<Grid Name="Grid 1.1" VerticalAlignment="Bottom">
<Grid Name="Grid 1.1.1" HorizontalAlignment="Left">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Left" Source="/left.jpg"/>
</StackPanel>
</StackPanel>
</Grid>
<Grid Name="Grid 1.1.2" HorizontalAlignment="Right">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Image HorizontalAlignment="Right" Source="/right.jpg"/>
</StackPanel>
</StackPanel>
</Grid>
</Grid>
</Grid>
</Window>
Structure explained:
Grid 1 is Main Grid.
Grid 1.1 to the desired the main address, in this case is Bottom.
Grid 1.1.1 and Grid 1.1.2 contain the specific addresses to each <Image>. For this case the StackPanel are used.
<StackPanel/> is the main container to fill the Grid 1.1.x.
<StackPanel Orientation="Horizontal"/> to use only one row
<Image HorizontalAlignment={one direction}/> to locate on the bottom grid, can be on right, left or center.
Result:
PD: I used this video for understand the concept on XAML WPF. Stack Panels & Dock Panels. I found a solution, with trial and error.
You can do this by using in StackPanel
Orientation="Horizontal"