CODEWITHSUNDEEP
c#wpfxamluser-controlslistbox
SG_90
SG_90

Reputation: 305

UserControl matching the size of a Window

My application is written in WPF. I have a Window with initial Width = 400. Within that Window I have a DockPanel with a StackPanel containing a custom UserControl called ElementsPanel.

Here is the code:

<Window x:Class="Adiastemo2.EditWindow" ... Height="500" Width="400" x:Name="view2" ... >
    <DockPanel>
        <StackPanel Height="70" DockPanel.Dock="Top" Background="Beige">
            <local:ElementsPanel/>
        </StackPanel> ...

The ElementsPanel control consists of a StackPanel with a ListBox. The ListBox's ItemsPanel is templated with a simple ScrollViewer and an ItemsPresenter.

Here is the code again:

<UserControl x:Class="Adiastemo2.ElementsPanel" ...
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="70">
<StackPanel Orientation="Horizontal" Margin="0,0,0,20" >
    <ListBox>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <VirtualizingStackPanel Orientation="Horizontal" Background="BlanchedAlmond"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.Template>
            <ControlTemplate TargetType="ListBox">
                <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden">
                    <ItemsPresenter/>
                </ScrollViewer>
            </ControlTemplate>
        </ListBox.Template>
        ... <!-- Some test content comprising several 50x50 Buttons -->
    </ListBox>
</StackPanel>

I'd like my ElementsPanel and its content's Width to resize whenever the Window gets resized, so that horizontal scrolling was enabled if there are too many Buttons to display. Right now what I get is this:

500x400 Window: http://screenshooter.net/100101493/qiaxocp

Wider: http://screenshooter.net/100101493/utkcyel

How do I achieve my goal?

Upvotes: 1

Views: 1150

Answers (1)

Rohit Vats
Rohit Vats

Reputation: 81253

Bind the Width of UserControl to ActualWidth of Window:

<Window x:Class="Adiastemo2.EditWindow" ... Height="500"
        Width="400" x:Name="view2" ... >
    <DockPanel>
        <StackPanel Height="70" DockPanel.Dock="Top" Background="Beige">
            <local:ElementsPanel Width="{Binding ActualWidth,
                                                 ElementName=view2}"/>
        </StackPanel> ...

Upvotes: 2

Related Questions