How to change the Border width and height in code from a

Question

I would like to get the width and height of both the borders from code and change them programmatically. I have a button that should change the size of both of them but I don't know how to get them from my class. How can I do it? The size of both is always the same

                    <ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto" x:Name="games_list" MouseDoubleClick="Games_list_MouseDoubleClick" Background="{StaticResource DefaultBackgroundColor}" Padding="10" BorderBrush="{x:Null}" Foreground="{x:Null}" SelectionChanged="Games_list_SelectionChanged" KeyDown="Games_list_KeyDown" MouseEnter="Games_list_MouseEnter" MouseLeave="Games_list_MouseLeave" >
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Border Margin="10" Width="150" Height="225" Background="{StaticResource DetailsColor}">
                                    <StackPanel>
                                        <Border Width="150" Height="225">
                                            <DockPanel>
                                                <Image Source="/icons/delete.png" Width="24" Height="24" HorizontalAlignment="Left" Margin="2" VerticalAlignment="Top" MouseLeftButtonUp="Delete_MouseLeftButtonUp" >
                                                    <Image.Effect>
                                                        <DropShadowEffect/>
                                                    </Image.Effect>
                                                </Image>
                                                <Image Source="/icons/info.png" Width="24" Height="24" HorizontalAlignment="Right" Margin="2" VerticalAlignment="Top" MouseLeftButtonUp="Info_MouseLeftButtonUp" >
                                                    <Image.Effect>
                                                        <DropShadowEffect/>
                                                    </Image.Effect>
                                                </Image>
                                            </DockPanel>
                                            <Border.Background>
                                                <ImageBrush ImageSource="{Binding Image_path}"/>
                                            </Border.Background>
                                        </Border>
                                        <Rectangle Fill="#4C000000"  Margin="0,-20,0,10" Height="20"/>
                                        <TextBlock Text="{Binding Name}" Foreground="White" FontSize="16" TextAlignment="Center" Margin="0,-32,0,44" />
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                    </ListBox>

Jiale Xue - MSFT · Accepted Answer · 2022-06-07T09:31:02.027

1

You only need to set a Binding, the following is a minimalist demo of mine:

(Use the slider to control the width and height of the border.)

<StackPanel Margin="30,40,37,81">
            <Border Width="{Binding Path=Value,ElementName=slider1}" Height="{Binding Path=Value,ElementName=slider1}" BorderBrush="Black" Margin="5">
                <DockPanel Background="Black">
                    <Label >TEST</Label>
                </DockPanel>
            </Border>
            <Slider x:Name="slider1" Maximum="100" Minimum="0" Margin="5" />
        </StackPanel>

Updated:

xaml:

   <Grid Loaded="Grid_Loaded">
        <StackPanel Margin="30,40,37,81">
            <Border Name="border1" BorderBrush="Black" Margin="5" Loaded="Border_Loaded">
                <DockPanel Background="Black">
                </DockPanel>
            </Border>
        </StackPanel>
    </Grid>

code:

private void Border_Loaded(object sender, RoutedEventArgs e)
        {
            int c = 500;
            int d = 300;
            this.border1.SetBinding(Border.HeightProperty, new Binding(".") { Source = c });
            this.border1.SetBinding(Border.WidthProperty, new Binding(".") { Source = d }); 

        }

edited Jun 07 '22 at 09:31

answered Jun 07 '22 at 06:05

Jiale Xue - MSFT

3,560
1
6
21

I could use this as solution too but I would like to have a second option where clicking an icon it gets a value from the main class variable. The reason is that I have some settings saved and it would restore them when reopening the app. In the main class I have cardWidth & cardHeight and I would like to use these variables as border width and height. Thanks – Code9 Jun 07 '22 at 08:06
project->property->settings. You can use this to meet your needs. – Jiale Xue - MSFT Jun 07 '22 at 08:17
I don't know if I didn't explain it correctly, what I want is to retrieve the width and height of the border from my MainWindow and use them for the border size. The code above is what I was looking for but I would like to get them from my MainWindow too. P.s. I don't know how good is that but I'm handling my own settings within a file so I load them at the start and I will use them later – Code9 Jun 07 '22 at 08:44
If you want to save and reuse it next time, the way I know of is to use [setting](https://learn.microsoft.com/en-us/visualstudio/ide/managing-application-settings-dotnet?view=vs-2022). [Bind it to the variable created inside.](https://stackoverflow.com/questions/845030/bind-to-a-value-defined-in-the-settings) – Jiale Xue - MSFT Jun 07 '22 at 08:58
In my MainWindow class I have something like ```public void borderSize =300;``` and I would like to bind the size of the border in that way ```{Binding borderSize}``` does nothing – Code9 Jun 07 '22 at 09:14
You could check my update. – Jiale Xue - MSFT Jun 07 '22 at 09:31

How to change the Border width and height in code from a

1 Answers1