This is my WPF UserControl code reduced to the relevant part:
<UserControl x:Class="AKPS.View.UserCalibWindow"
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"
>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Width="1600" >
<Button Height="45" Width="100" />
<Button Height="45" Width="100" />
</StackPanel>
Why do the 2 buttons display on the left?
You are having a Width for your StackPanel removing that will align your stack panel to right with your controls in it.
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Height="45" Width="100" />
<Button Height="45" Width="100" />
</StackPanel>
A StackPanel does exactly that - it stacks elements together, in your case, horizontally. Your HorizontalAlignment is referring to the stack panel, which will shift it to the right, not the buttons inside them.
Instead, perhaps try using a Grid instead of a StackPanel, and then placing your StackPanel (with no Width element set) inside it.
HorizontalAlignment controls the container's alignment.
Try HorizontalContentAlignment instead.
As Abin indicated, in my haste I'd forgotten StackPanel doesn't have a HorizontalContentAlignment property.
You could achieve similar functionality with a DockPanel though, or use Abin's solution.
Related
There is one Grid and I drop an Image control into the Grid.
What I do : just simply change both the property-HorizontalAlignment and VerticalAlignment to 'Center'.
However the image control performs strangely unlike other controls do. This Image control center itself according to its upper left corner like below :
I want to know why it performs in this way?
EDIT
Here is my XAML:
<UserControl x:Class="Entity.WPF.Controls.ShopProfile"
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"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="780">
<Grid>
<DockPanel >
<Grid>
<Image HorizontalAlignment="Center" Height="100" Margin="0" VerticalAlignment="Center" Width="100"/>
</Grid>
</DockPanel>
</Grid>
And if I set margin like Margin="-50,-50,0,0",it is centered actually,but why other controls don't need this setting?
That's interesting, I'm not sure why that happens, or if it's documented somewhere.
To answer your question, how to center the image control inside a grid, just remove those properties and the image will be centered in the grid automatically.
<Grid>
<Image Height="100" Margin="0" Width="100" />
</Grid>
I'm newbie with Wpf application i have this interface
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Alg="clr-namespace:AS.Views.DeformableModel"
xmlns:Controls="clr-namespace:Assergs.Windows.Controls;assembly=Assergs.Windows" x:Class="AS.Window1"
Title="Window1"
>
<Grid Margin="0,0,2,0">
<Controls:RibbonPanel Header="Menu" HorizontalAlignment="Left" Margin="0,0,0,31.405" Width="213.388">
<TreeView Width="210.449" HorizontalAlignment="Left" Margin="0,0,0,-1.515"/>
</Controls:RibbonPanel>
<StatusBar Margin="0,472.595,0,0.972" VerticalAlignment="Bottom">
<Label Content="Pret" Height="41.433" Width="36.737"/>
</StatusBar>
<StackPanel Margin="213.388,0,0,31.405">
<Image Height="473.5" Source="image-interface2.jpg"/>
</StackPanel>
</Grid>
</Window>
i got as a result:
as you saw, there is many design error i need to know :
How can i display the image at the full stackpanel space ?
why the RibbonPanel controller disappeared?
How can i change my snippet to make all controller's size depending to the size of the window (image,treeview...)
I think you should to know about wpf's panels and layouts. The grid is an excellent panel and you can get almost any common layout. But for getting this you should works with columns and rows (not only with margins and vertical/horizontal orientations). The stack panel is not the best control for stretching an image: if the stackpanel's orientation is vertical the item'a height is the item's desired height, and if the orientation is horizontal, the item's width is the item's desired width, so, if you want to stretch the image you can group it inside a content control, or (if there is no more controls) do not group.
I suggest you to use a dockpanel, the dock panel alows you put the items in the locations top, right, bottom and left:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Alg="clr-namespace:AS.Views.DeformableModel"
xmlns:Controls="clr-namespace:Assergs.Windows.Controls;assembly=Assergs.Windows" x:Class="AS.Window1"
Title="Window1"
>
<DockPanel Margin="0,0,2,0">
<Controls:RibbonPanel DockPanel.Dock="Left" Header="Menu" Width="213.388">
<TreeView /> <!--The tree view will be vertican and horizontally stretch-->
</Controls:RibbonPanel>
<StatusBar DockPanel.Dock="Bottom" Height="41.433">
<Label Content="Pret" Width="36.737"/>
</StatusBar>
<Image Stretch="UniformToFill" Source="image-interface2.jpg"/> <!--The last item take all aviable space-->
</DockPanel>
</Window>
Hope this helps...
Read about Layout Containers.
http://www.codeproject.com/Articles/140613/WPF-Tutorial-Layout-Panels-Containers-Layout-Trans
In your case you may use dock panel as parent panel.
Use Grid or Border instead panels. (I have not tested this code)
<DockPanel Margin="0,0,2,0">
<Grid DockPanel.Dock="Bottom">
<Label Content="Pret" Height="41.433"/>
</Grid>
<Grid DockPanel.Dock="Left" Width="213">
<TreeView Width="210.449" HorizontalAlignment="Left"/>
</Grid>
<Grid>
<Image Source="image-interface2.jpg" Stretch="Fill"/>
</Grid>
</Grid>
This should be easy: how can I stretch StackPanel inside the DockPanel, so that it would fill the whole parent's content and also maintain it's HorizontalAlignment?
Example:
<DockPanel LastChildFill="True">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Background="Yellow">
<Button Height="30">Button1</Button>
<Button Height="30">Button2</Button>
</StackPanel>
</DockPanel>
In this example the StackPanel's width is the same as the combined width from both buttons (and the background here is yellow), but the remaining space in DockPanel stays white. Looks like the LastChildFille property isn't working in my example.
I think by setting HorizontalAligment to Center on the StackPanel you are overriding the behavior of the DockPanel to fill the whole space with the StackPanel.
When i understand your question right, you want that the full space is yellow and the stackpanel with buttons is centered in the middle. Then you should wrap the StackPanel inside a Grid.
<DockPanel LastChildFill="True">
<Grid Background="Yellow">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Button Height="30">Button1</Button>
<Button Height="30">Button2</Button>
</StackPanel>
</Grid>
</DockPanel>
I don't know how this works technically but my requirement is as follows. I have a DataGrid and to input data into the DataGrid, I want a panel at the bottom of the DataGrid that slides out on a button click showing input options. Except, as the panel slides out, the DataGrid has to resize vertically as well. Can someone throw some light on how I can implement this?
You should be able to use a StackPanel with 2 children, your grid and your panel. Set the initial height of your panel to 0. Once the button is clicked, set the height to whatever you need it to be (e.g., MyPanel.Height = 20). You might want to wrap the grid in a ScrollViewer in case that is needed.
<StackPanel Orientation="Vertical">
<ScrollViewer Height="Auto" VerticalAlignment="Stretch">
<Grid Height="*" VerticalAlignment="Stretch" />
</ScrollViewer>
<ContentControl x:Name="MyPanel" Height="0" />
</StackPanel>
You might need to experiment with VerticalAlignment and Height="Auto" or Height="0" to get the layout you want.
You can use Expander. Please look at the following code snippet.
<DockPanel>
<Expander DockPanel.Dock="Bottom">
<StackPanel>
<TextBlock Height="25"></TextBlock>
<TextBlock Height="25"></TextBlock>
<TextBlock Height="25"></TextBlock>
</StackPanel>
</Expander>
<Border BorderBrush="LightGreen" BorderThickness="2">
<DataGrid/>
</Border>
</DockPanel >
This question already has answers here:
WPF: template or UserControl with 2 (or more!) ContentPresenters to present content in 'slots'
(3 answers)
Closed 3 years ago.
I have a custom ControlTemplate for a WPF TabControl that adds Buttons to the left and right hand side of the TabItem header. At the moment this is not a named part as the button commands are bound in the ControlTemplates XAML and do not need to be exposed outside of the ControlTemplate.
This works fine for a button but what if I want to add content to the left (or right) hand side of the TabItemHeaders which can be bound outside of the ControlTemplate so that my TabControl becomes more flexible?
My idea was to subclass the TabControl and have two named parts in the ControlTemplate and expose these as properties of the new control; CustomTabControl.LeftContentArea and CustomTabControl.RightContentArea respectively. Each named part is a ContentPresenter and each ContentPresenters Content property is exposed by the properties named above.
However, when I tried this I was unable to put content into the left and right content areas.
Edit: Just to be clear I have included an image. The red rectangles show where I want to be able to place extra content.
Update: Below is a screen shot of the progress I have made so far, hopefully this will help explain my problem a bit more.
The screen shot shows my custom Tab Control with two blank tabs and three buttons that are currently on the right hand side of the TabItem header area. The buttons are currently defined in the TabControls custom ControlTemplate I.E. there is a ColumnDefinition within the ControlTemplates Grid which contains a StackPanel that hosts 3 buttons.
What I am looking for is a way to allow the consumer of the tab control decide what content goes in the area next to the tabs. E.G. the user should be able to do something like this:
<local:CustomTabControl>
<local:CustomTabControl.RightContentArea>
<!-- This can be changed to ANY content that the user wants -->
<StackPanel Orientation="Horizontal">
<Button Content="Test" />
<Button Content="Test" />
<Button Content="Test" />
</StackPanel>
</local:CustomTabControl.RightContentArea>
<!-- TabItems are added as normal -->
<TabItem Header="Tab One" />
<TabItem Header="Tab Two" />
</local:CustomTabControl>
I tried a different (lazy) way, which was to create another grid that occupies the same space as the TabControl, ie both are in Grid.Row=0. I have bound the grid height to the height of the first tab so if the tabs change height the other controls will remain centered. I set MinWidth on the window so the controls dont overlap the tabs.
Paste this code into a new WPF Window...
<Window x:Class="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"
mc:Ignorable="d"
Title="MainWindow" Height="306" Width="490" MinWidth="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TabControl Grid.Row="0" x:Name="tabControl">
<TabItem x:Name="tabItem" Header="TabItem" Height="50">
<Grid Background="#FFE5E5E5"/>
</TabItem>
<TabItem Header="TabItem">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
<Grid Grid.Row="0" Height="{Binding ActualHeight, ElementName=tabItem}"
VerticalAlignment="Top" Margin="0,2,0,0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
VerticalAlignment="Center" Margin="20,0">
<TextBlock VerticalAlignment="Center" Margin="10,0" FontSize="16"
Foreground="Red" FontFamily="Calibri">My Text</TextBlock>
<Button Content="My Button" />
</StackPanel>
</Grid>
</Grid>
</Window>
...and you will get this:
Depending on how much flexibility you need there are some methods that are suited better than others, i myself try to use DynamicResources if possible because it is normally less troublesome than creating new user-controls.
Here's an example of how to add additional content to the left of the Tab-Header:
<TabControl>
<TabControl.Resources>
<DataTemplate x:Key="AugmentedTabItem">
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{DynamicResource ContentLeft}" Margin="0,0,5,0"/>
<ContentPresenter Content="{Binding}"/>
</StackPanel>
</DataTemplate>
</TabControl.Resources>
<TabItem Header="ÜberTab" HeaderTemplate="{StaticResource AugmentedTabItem}">
<TabItem.Resources>
<TextBlock x:Key="ContentLeft" Text=">>>" Foreground="Blue"/>
</TabItem.Resources>
</TabItem>
</TabControl>
Hope that helps, if something is unclear or if this doesn't suffice, drop a comment.