CODEWITHSUNDEEP
c#wpfxamlgrid
Sebastian Lasia
Sebastian Lasia

Reputation: 1

Fit Content To Columns Xaml

I'm working with XAML and I need to accomplish the following:

I have a series of buttons, and I need to be fit against a particular column when the resolution is changed. Use the DockPanel element, but what achievement with that is that the column buttons suits. What I need is the opposite that the size of the buttons fit the column. Any suggestions?

Here is the code

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="25*"/>
            <ColumnDefinition Width="50*"/>
            <ColumnDefinition Width="25*"/>
        </Grid.ColumnDefinitions>
        <Border Grid.Column="0"/>
        <Border Grid.Column="2"/>
        <Border Grid.Column="1" >
        <Grid Name ="grillaEditor">
            <Grid.RowDefinitions>
                <RowDefinition Height="12*"/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Border Grid.Row="0"/>
            <Border Grid.Row="1">
                <StackPanel Orientation="Horizontal">
                    <StackPanel  Orientation="Horizontal" >
                        <Button Width="30" Height="30" BorderBrush="{x:Null}"   >
                            <StackPanel>
                                    <Image Source="Resources/Images/Icons/undo-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" BorderBrush="{x:Null}" >
                            <StackPanel>
                                    <Image Source="Resources/Images/Icons/redo-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" BorderBrush="{x:Null}">
                            <StackPanel>
                                <Image Source="Resources/Images/Icons/paste-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" BorderBrush="{x:Null}" >
                            <StackPanel>
                                    <Image Source="Resources/Images/Icons/cut-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" BorderBrush="{x:Null}" >
                            <StackPanel>
                                <Image Source="Resources/Images/Icons/copy-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" BorderBrush="{x:Null}">
                            <StackPanel>
                                <Image Source="Resources/Images/Icons/trash-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30"  >
                            <StackPanel>
                                <Image Source="Resources/Images/Icons/left_circular-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30"  >
                            <StackPanel>
                                    <Image Source="Resources/Images/Icons/right_circular-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30"" >
                            <StackPanel>
                                <Image Source="Resources/Images/Icons/up_circular-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" >
                            <StackPanel>
                                    <Image Source="Resources/Images/Icons/down_circular-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" >
                            <StackPanel>
                                <Image Source="Resources/Images/Icons/restart-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" >
                            <StackPanel>
                                    <Image Source="Resources/Images/Icons/select_all-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" BorderBrush="{x:Null}" >
                            <StackPanel>
                                    <Image Source="Resources/Images/Icons/zoom_out-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" BorderBrush="{x:Null}" >
                            <StackPanel>
                                    <Image Source="Resources/Images/Icons/zoom_in-26.png" ></Image>
                            </StackPanel>
                        </Button>
                        <Button Width="30" Height="30" BorderBrush="{x:Null}" >
                            <StackPanel>
                                    <Image Source="Resources/Images/Icons/resize_four_directions-26.png" ></Image>
                            </StackPanel>
                        </Button>
                    </StackPanel>
                </StackPanel>
                </Border>
            </Grid>
        </Border>

Upvotes: 0

Views: 1224

Answers (1)

Skyl3lazer
Skyl3lazer

Reputation: 378

You're setting the Width and the Height of the buttons, so they'll always try to be that size. Set a width and height on your column's StackPanel, then on the buttons set HorizontalAlignment = Stretch to have them fit the width of their parent container, or VerticalAlignment = Stretch to have them fit the height of it.

Upvotes: 1

Related Questions