Re: Stopping resizing of usercontrol and grid cell visibility - WPF Discussion Boards

Re: Stopping resizing of usercontrol and grid cell visibility

24-Sep-15 7:45

So if I am correct in understanding, you have a UserControl that is a button that you want to place in Grid.Row 2. Judging by the HorizontalAlignment="Left" and the Vertical Alignment="Center", this button is going to be placed in this grid along with some other control and you want them aligned and not to resize?

<UserControl ...YourUserControl designHeight="50" designWidth="100">
    <Button x:Name="btnQCReport" Content="QC Report" Style="{StaticResource ButtonStyle}"/>
</UserControl>

1) Grid.Row="0" is the first row, Grid.Row="1" would be the second row, and since there are only 2 rows defined in the definition, I think the first step is to make it Grid.Row="1". Also, If there is nothing in Grid.Row="0" then the Auto deceleration would essentially be empty, and no space taken up.

2) VerticalAlignment="Center" and HorizontalAlignment="Left" are not going to be valid unless there are other controls inside this grid along with the usercontrol, otherwise the Auto will size the width and height to the control. Having said that, if there is indeed another control that is taller and wider than this control, inside the same grid space, then indeed this would need to be set. Also, if there is more than one control you will need some kind of arrangement control such as a StackPanel to place them. For example:

<Grid Grid.Row="1">
    <StackPanel Orientation="Horizontal">
        <local:YourUserControl Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <local:AnotherUserControl Height="100" Width="200"/>
    </StackPanel>
</Grid>

Next I am guessing you have a property bound to the visibility that changes the visibility of your button; however, just to illustrate my point, if you were to set the visibility property to collapsed, the space should release. Such as:

<Grid Grid.Row="1">
    <StackPanel Orientation="Horizontal">
        <local:YourUserControl Height="50" Width="100" HorizontalAlignment="Left"
                                    VerticalAlignment="Center" Visibility="Collapsed"/>
        <local:AnotherUserControl Height="100" Width="200"/>
    </StackPanel>
</Grid>

Hope this is what you were looking for! Again I am making a few assumptions, so if I am not answering what you are asking, if you could be more specific I would be happy to continue to try and assist you!

Saurabh18cs24-Sep-15 21:50

Re: Stopping resizing of usercontrol and grid cell visibility

24-Sep-15 21:50

Hi J. Calhoun,

Thanks for your time to look into my problem and come up with above solution. Unfortuantely this is not what i am looking for , as i have replied to kerry :

i am having 2,2 size grid holding buttons on all cell, when i make any of the button invisible , i want to release that cell space but collapsed not working here . i hope you got my problem now.
Thanks

J. Calhoun25-Sep-15 2:14

Re: Stopping resizing of usercontrol and grid cell visibility

25-Sep-15 2:14

Ok, yes I think I understand a little better now, so you have a 2 x 2 grid, each has a button in it. When one of those buttons is set to collapsed you want the grid space to be released. Here is the solution I have come up with.

1) you only need to do row definitions

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    <Grid.RowDefinitions>
</Grid>

Next you will want to declare some stack panels

<StackPanel Grid.Row="0">
    <StackPanel Orientation="Horizontal">
        <Button Height="50" Width="100" />
        <Button Height="50" Width="100" />
    /StackPanel>
</StackPanel>

<StackPanel Grid.Row="1">
    <StackPanel Orientation="Horizontal">
        <Button Height="50" Width="100" />
        <Button Height="50" Width="100" />
    /StackPanel>
</StackPanel>

Now you have a button in each quadrant and as you set each visibility to collapsed you will see that the grid space previously held by the button will be released.

You may have to do some sizing with the UserControl or Window that hosts the grid that this is placed in, but the concept should be what you are asking.

Hope this correctly identifies your issue and helps with a resolution!

Saurabh18cs25-Sep-15 20:06

Re: Stopping resizing of usercontrol and grid cell visibility

25-Sep-15 20:06

Hello J. Calhoun,

thannks for quick response.

i can only test out this when i am back to my office and will surely update feedback on this forum.

This solution seems to work but want to check for one case

If my button belongs to row 2 with position 1 and if i make visiblilty collapsed of button belongs to row 1 and second position than this position will be taken by row 2 , 1st button?

[In more simple words , button belongs to row 2 , column 1 should take the position of button belongs to row 1 , column 2 when existing button of row 1 , column 2 become collapsed]

I need this case to be meet. thanks

J. Calhoun28-Sep-15 3:06

Re: Stopping resizing of usercontrol and grid cell visibility

28-Sep-15 3:06

In that case it might be possible to put all of the buttons in a

HTML

<WrapPanel Orientation="Horizontal">

and size it to let the third and fourth button wrap to the second row, that way when the space is released they will filter back up to the top row.

Saurabh18cs29-Sep-15 0:13

Re: Stopping resizing of usercontrol and grid cell visibility

29-Sep-15 0:13

Hi,

I tried your way of using wrappanel but using this it is aligning all the buttons to horizontal on default load itself.

below is my original code , it will help you to understand by button arrangement.

<UserControl x:Class="iPLAN20.Windows.LS.dckSafeDevt"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns Big Grin | :-D

="http://schemas.microsoft.com/expression/blend/2008"
xmlns:wf="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"
xmlns:local="clr-namespace:iPLAN20.Model.LS"
xmlns:stb="clr-namespace:UIControls;assembly=iPLAN20UIControls" HorizontalAlignment="Left" VerticalAlignment="Top" Name="ucSafeDevt">
<UserControl.Resources>
<local:clsAppSiteModel x:Key="AppSiteModel"/>
</UserControl.Resources>
<Grid HorizontalAlignment="Left" Name="gridLandSafeguarding" DataContext="{StaticResource AppSiteModel}">
<Grid.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\..\Resources\ButtonStyle.xaml"/>
<ResourceDictionary Source="..\..\Resources\textbox.xaml"/>
<ResourceDictionary Source="..\..\Resources\Common.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Grid.Resources>

<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>

<Label Grid.Row="0" Grid.Column="0" Style="{StaticResource ASCIILabelStyle}" Content="Site No.:" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<TextBox Text="{Binding TestText}" stb:AutoCompleteBehavior.AutoCompleteItemsSource="{Binding AppSiteList}" AutoWordSelection="True" Width="150" Name="txtSearchAppSite" TextAlignment="Center" Margin="5,5,0,5" VerticalContentAlignment="Center"/>
<Button IsDefault="True" x:Name="btnFind" Style="{StaticResource MetroButton}" Margin="1" Click="btnFind_Click">
<Button.Content>
<StackPanel Orientation="Horizontal">
<Image Source="/IPLAN20;component/Images/Search.png"/>
</StackPanel>
</Button.Content>
</Button>
</StackPanel>

<Label Style="{StaticResource ASCIILabelStyle}" Content="Commands:" Grid.Column="0" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<Button Grid.Row="2" Grid.Column="0" Height="50" x:Name="btnNewSite" Width="100" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Click="btnNewSite_Click" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
New Site
</TextBlock>
</Button>

<Button Grid.Row="2" Grid.Column="1" x:Name="btnModifySite" Width="100" Height="50" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Modify Site
</TextBlock>
</Button>
<Button Grid.Row="2" Grid.Column="2" Height="50" x:Name="btnDraft" Width="100" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Save to Draft
</TextBlock>
</Button>
<Button Grid.Row="3" Grid.Column="0" Height="50" x:Name="btnLowHgtCtrl" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Lowest Height Control
</TextBlock>
</Button>
<Button Grid.Row="3" Grid.Column="1" Height="50" x:Name="btnQCReport" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
QC Report
</TextBlock>
</Button>
<Button Grid.Row="3" Grid.Column="2" Height="50" x:Name="btnSendQC" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Send for QC
</TextBlock>
</Button>
<Button Grid.Row="4" Grid.Column="0" Height="50" x:Name="btnMaintainSchemechklst" Width="100" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Maintain Scheme Checklist
</TextBlock>
</Button>
<Button Grid.Row="4" Grid.Column="1" Height="50" x:Name="btnConfigureStryHghts" Width="100" IsEnabled="True" HorizontalAlignment="Left" VerticalAlignment="Center" Style="{StaticResource ButtonStyle}">
<TextBlock TextWrapping="Wrap" TextAlignment="Center" Style="{StaticResource TextBlockStyle}">
Configure Storey Heights
</TextBlock>
</Button>

<StackPanel Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3" Orientation="Vertical" HorizontalAlignment="Stretch" >
<Label Style="{StaticResource ASCIILabelStyle}" Content="My Drafts:" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<ListBox Name="listBoxDraftVersions" Height="200" Width="250" Background="Azure" Margin="3" ItemsSource="{Binding TheList}">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="CheckBoxZone" Content="{Binding TheText}" Tag="{Binding TheValue}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>

<Button Content="Load" Grid.Row="6" Grid.Column="0" IsDefault="True" x:Name="btnLoad" Style="{StaticResource MetroButton}"/>
<Button Content="Reassign" Grid.Row="6" Grid.Column="1" IsDefault="True" x:Name="btnReassign" Style="{StaticResource MetroButton}"/>
<Button Content="Delete" Grid.Row="6" Grid.Column="2" IsDefault="True" x:Name="btnDelete" Style="{StaticResource MetroButton}"/>

</Grid>
</UserControl>

J. Calhoun29-Sep-15 3:38

Re: Stopping resizing of usercontrol and grid cell visibility

29-Sep-15 3:38

Thank you, this did help me to get a visual of what you are trying to accomplish. I still have one question and that is, the only buttons that you want to change the visibility on are the 8 buttons in the middle of your control correct? Under that assumption I have come up with a solution that I believe meets your requirements.

I made a User Control with the design height at 500 and the design width at 300 which allowed me to fit all your controls in the window and keep the same arrangement scheme that you provided.

Next, I created 3 rows and seperated your controls into the 3 Sections. The top controls will go in the first StackPanel like this:

HTML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Row="0">
            <Label Content="Site No.:" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <TextBox Width="150" Margin="5,5,0,5" HorizontalAlignment="Left" VerticalAlignment="Center"/>
            <Button Margin="1" Content="YourImage"/>
        </StackPanel>
        <Label Content="Commands" HorizontalAlinment="Left" VerticalAlignment="Center"/>
    </StackPanel>

The WrapPanel is where I host your 8 buttons, and the StackPanels will host your other controls.

HTML

<WrapPanel Orientation="Horizontal" Grid.Row="1">
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            New Site
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
                Modify Site
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Save To Draft
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Lowest Height Control
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            QC Report
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Send for QC
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Maintain Scheme Checklist
            </TextBlock>
        </Button>
        <Button Height="50" Width="100" HorizontalAlignment="Left" VerticalAlignment="Center">
            <TextBlock TextWrapping="Wrap" TextAlignment="Center">
            Configure Storey Heights
            </TextBlock>
        </Button>

This WrapPanel will cause your controls to take up the space that the collapsed button used to occupy and will move up rows if there is enough space on the row above it. The width of the WrapPanel will determine how many buttons per row as the buttons will fill in horizontally before moving down to the next row, this is possibly the reason for the vertical alignment you previously mentioned.
And Finally You can put your Last Section in another StackPanel:

HTML

    <StackPanel Grid.Row="2" HorizontalAlignment="Stretch">
        <Label Content"My Drafts:" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        <Listbox Height="200" Width="250" Background="Azure" Margin="3"/>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button Content="Load" Width="75" Margin="0,0,10,0"/>
            <Button Content="Reassign" Width="75" Margin="0,0,10,0"/>
            <Button Content="Delete" Width="75" Margin="0,0,10,0"/>
        </StackPanel>
    </StackPanel>
</Grid>

I hope this meets your requirements! If you have any other questions I will be happy to help!

Saurabh18cs29-Sep-15 17:28

Re: Stopping resizing of usercontrol and grid cell visibility

29-Sep-15 17:28

Thanks a lot. You're amazing . This is working as i wanted. Smile | :)

My post started with 2 questions and i am still finding answer for 1st part , please see if you can help me this one too. Let me narrow down my problem:

ORIGINAL POST
"I am using usercontrol (do not want to use window) and want to stop resizing of it but cannot see any property. please help me in achieving the same."

MORE DETAILS
I am binding this usercontrol to dockablewindow of other libraries. How can i control resizing of System.Windows.Forms.Integration.ElementHost()?

here is the code

public class AddinImpl : ESRI.ArcGIS.Desktop.AddIns.DockableWindow
{
private System.Windows.Forms.Integration.ElementHost m_windowUI;

public AddinImpl()
{
}

protected override IntPtr OnCreateChild()
{
m_windowUI = new System.Windows.Forms.Integration.ElementHost();
m_windowUI.Child = new dckSafeDevt();
//m_windowUI.MaximumSize = new System.Drawing.Size(305, 500);
return m_windowUI.Handle;
}

protected override void Dispose(bool disposing)
{
if (m_windowUI != null)
m_windowUI.Dispose();

base.Dispose(disposing);
}

}

dckSafeDevt is my usercontrol. Anyhelp on same will be really appreciated. Thanks a ton.

Regards

J. Calhoun30-Sep-15 3:11

Re: Stopping resizing of usercontrol and grid cell visibility

30-Sep-15 3:11

First thing I noticed is the commented line:

//m_windowUI.MaximumSize = new System.Drawing.Size(305, 500);

This will only set the maximum size of the element host so that you can not size it any larger than this size. The same rule will apply to MinimumSize, it will not size any smaller than that size.

m_windowUI.Size = new System.Drawing.Size(305,500);

is the event that I believe you are looking for. It has been a while since I worked with windows forms, but I believe when you set the size of a control it will not resize when the window does.

I suppose you could set a minimum and maximum that are the same size, but the real thing to understand here is that both the user control and the element host inherit from Control, so they should both be thought of as controls inside a window.

Now, that being said you can find a good reference of all of the properties of your element host here:
https://msdn.microsoft.com/en-us/library/vstudio/system.windows.forms.integration.elementhost%28v=vs.100%29.aspx[^]
And could possibly fix the client area of the control to a certain size, that way the UserControl would only fit inside that area?

Again it has been a while since I worked with Windows.Forms, but I will create a little dummy project and see if I can't find a solution, but hopefully these suggestions might get you on the right track.

If you could help me get a visual of what I need to recreate... Windows.Forms Window, element host, then WPF UserControl. The UserControl is in the element host that is docked inside a window with other winforms controls? or is the usercontrol hosted by itself inside the window?

I can't remember what I forgot...

Saurabh18cs30-Sep-15 22:45

30-Sep-15 22:45

G'Day,

Your suggestions are very helpfull but still i am not able to achieve this. I cannot able to stop resizing using m_windowUI.Size = new System.Drawing.Size(305,500).

As you asked , it is usercontrol only hosted within dockable window of esri using elementhost.

Thanks again for all your help

WPF UI Loading Question

Kevin Marois11-Sep-15 5:50

11-Sep-15 5:50

Is it possible to load various parts of a WPF UI in different threads?

I've got some UserControls loading that are slow, and I'd like to see if threading them would speed up the loading.

If it's not broken, fix it until it is

Kenneth Haugland12-Sep-15 1:57

Kenneth Haugland

12-Sep-15 1:57

Perhaps you could use some clever loading technique on some of the elements instead:
http://www.zagstudio.com/blog/498#.VfQSwH-qpBc[^]

Pete O'Hanlon12-Sep-15 11:36

Pete O'Hanlon

12-Sep-15 11:36

Rather than that, you should identify what the slowdown is and fix that. There are various optimisation techniques, but they are going to require you to do some root cause analysis first.

Kevin Marois14-Sep-15 15:27

14-Sep-15 15:27

I can't. Some of this is an old third party WinForms control that we're forced to use right now.

If it's not broken, fix it until it is

VerticalAlignment.Bottom Problem

Dave Kreskowiak15-Sep-15 3:25

Dave Kreskowiak

15-Sep-15 3:25

Well, threading isn't going to do anything. Creating an instance of the control cannot be done on a separate thread. It has to done on the UI (startup) thread since the form you're going to stick the control to is on the UI thread.

Really, you HAVE to do root cause analysis here. Is it the creation of the control that is slow or is it retrieving data that the control is going to use that is slow?

If it's the creation of the control there's nothing you can do about it.

A guide to posting questions on CodeProject

Click this: Asking questions is a skill.
Seriously, do it.

Dave Kreskowiak

Kevin Marois11-Sep-15 5:36

Re: VerticalAlignment.Bottom Problem

11-Sep-15 5:36

I have UserControl with it's VerticalAlignment set to Bottom so it's always along the bottom of the window.

At runtime the user can set a mode that causes it's height to increase. The problem is that all that does is extend it past the bottom of the window.

The control's Grid Height is "*".

How can I make all of it visible when it's height changes?

If it's not broken, fix it until it is

Kenneth Haugland20-Sep-15 22:07

Kenneth Haugland

20-Sep-15 22:07

Not sure what you are doing with your control, but if it was like a Status bar or similar, Id either use RowDefinitions or a DockPanel to set it at the bottom. But without any code, or an exact explanation of what you want to achieve its hard to give you any better advice.

Re: VerticalAlignment.Bottom Problem

J. Calhoun24-Sep-15 9:22

24-Sep-15 9:22

If you are trying to have a control, that is always aligned to the bottom of the window, yet when the height property changes, the height goes up instead of down I suggest you do something like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

Then on the bottom grid:

<Grid Grid.Row="2" x:Name="MyGrid" VerticalAlignment="Stretch" HorizontalAlignment="Stretch/>

On Runtime if you would like to change the height of the control, then all you would need to do is change the height of the Grid. By doing this you keep your control inside the bounds of the grid, yet if the grid height changes, so will the control since the property is set to stretch.

WPF How To Freeze The UI

Kevin Marois10-Sep-15 5:57

SearchTextBox by sean a. hanley

10-Sep-15 5:57

I have a WPF app that contains some slow WinForms controls in it. Later they'll be replaced with WPF controls.

The problem is that they're very slow and cause the UI to act strange at times. For example, when the main window is resized, the controls are resize, and they look horrible during resizing.

Is it possible in WPW to 'Freeze' the UI until resizing/loading is done?

Thanks

If it's not broken, fix it until it is

Saurabh18cs9-Sep-15 16:22