Simple WPF 'panel' issue
a 'simple' about controls layout in wpf. There is a custom control with a grid in wich there is 'panel' on this panel there are three elements two buttons and slider between them. Right button must be anchored to right side of the 'panel', left button to the left side of 'panel' and the slider must FILL ALL THE FREE SPACE BETWEEN buttons. The width(and height) of buttons and grid will be set dinamycaly in the code after. The question is - what kind of 'panel'I must use and how to make it to operate with given task? (stack, dock - have no such functionality even with this "horizontal stratching") In WinForms - there are no problem width of slider = widthOfGrid - (widtOfBothButtons) Is this possible to do it in wpf? Or I must compose the code like above in some constructor-like functions? (offtop- As for me this is a typical task for wpf control and I am surprized that it has too little automatic to solve it)
<UserControl x:Class="WpfApplication1.UserControl2" 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="42" d:DesignWidth="291"> <Grid x:Name="gridCtrl"> <Grid.ColumnDefinitions> <ColumnDefinition x:Name="clnmLbl" Width="Auto"/> <ColumnDefinition x:Name="clnmPnl" /> </Grid.ColumnDefinitions> <Label x:Name="lblText" Grid.Column="0" Content="" VerticalAlignment="Center"> </Label> <DockPanel x:Name="pnlDock" Grid.Column="1"> <Button x:Name="btnLeft" HorizontalAlignment="Left" DockPanel.Dock="Left"> </Button> <Border x:Name="BorderOfSlider" BorderBrush="#FF000000" BorderThickness="3,3,3,3" CornerRadius="8,8,8,8" > <Slider x:Name="sldSlider" HorizontalAlignment="Stretch" VerticalAlignment="Center" > </Slider> </Border> <Button x:Name="btnRight" HorizontalAlignment="Right" DockPanel.Dock="Right"> </Button> </DockPanel> </Grid> </UserControl>
That sounds exactly like what a DockPanel does.... it will Dock controls to the sides of the panel, and by default the last control added will stretch and fill all remaining space
<DockPanel> <Button DockPanel.Dock="Left" Content="Left Button" /> <Button DockPanel.Dock="Right" Content="Right Button" /> <Slider /> </DockPanel>
Also if you're new to WPF, I'd recommend taking a look at this site for a quick visual view of WPF's layout controls.
Make sure your control that fills all remaining space is the last item added to your DockPanel. If not, it will use a default value of DockPanel.Dock="Left"
There are several ways to do it:
1) DockPanel. Left button will occupy some place at the left side of DockPanel, right button will occupy required space on the right side of remaining space. The rest will be used to display Slider.
<DockPanel> <Button DockPanel.Dock="Left">Left button</Button> <Button DockPanel.Dock="Right">Right button</Button> <Slider /> </DockPanel>
2) Grid. Create grid with 3 columns. Left and right columns will take only required space, the rest will be given to the center column.
<Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Button Grid.Column="0">Left button</Button> <Slider Grid.Column="1" /> <Button Grid.Column="2">Right button</Button> </Grid>