locked
Stretch To Fix TextBox RRS feed

  • Question

  • In the code below, I have a DockPanel that contains 3 horizontal StackPanels:

    First StackPanel: Contains fixed width ComboBox
    Second StackPanel: Contains textbox that I'd like to stretch to horizontally fill whatever space is left.
    Third StackPanel: Contains fixed width button.

    With the code below, the textbox isn't stretching at all. It's acting like a fixed width. Any pointers to allow the textbox to stretch to fill the space are greately appreciated...

    <DockPanel Grid.Row="0" Grid.Column="0" LastChildFill="True" Background="WhiteSmoke"
                VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <StackPanel Orientation="Horizontal" 
                    VerticalAlignment="Center" HorizontalAlignment="Right">
            <ComboBox Name="_selectGraphicalOrNonGraphicalTree" 
                        Width="121">
                <ComboBoxItem>Graphical</ComboBoxItem>
                <ComboBoxItem>Non-Graphical</ComboBoxItem>
            </ComboBox>
        </StackPanel>
        <StackPanel Orientation="Horizontal" 
                    VerticalAlignment="Center" HorizontalAlignment="Stretch">
            <common:SearchTextBox x:Name="_searchTextBox" 
                                    VerticalAlignment="Center" HorizontalAlignment="Stretch"
                                    Label="Enter search text here."
                                    Text="{Binding SearchText}"
                                    ToolTip="Enter search text here." 
                                    PreviewKeyDown="_searchTextBox_PreviewKeyDown" 
                                    PreviewMouseRightButtonDown="_searchTextBox_PreviewMouseRightButtonDown" 
                                    TextChanged="_searchTextBox_TextChanged" Width="60">
                <common:SearchTextBox.InputBindings>
                    <KeyBinding Key="Enter"
                                Command="{Binding ElementName=_thisTabularView, Path=DataContext.FindAdvisories}"
                                CommandParameter="{Binding ElementName=_searchTextBox, Path=Text}" />
                </common:SearchTextBox.InputBindings>
            </common:SearchTextBox>
        </StackPanel>
        <StackPanel Margin="10, 5" Orientation="Horizontal" 
                    VerticalAlignment="Center" HorizontalAlignment="Right">
            <common:ImageButton x:Name="btnFind" 
                                Image="{StaticResource findImageSource}" 
                                Style="{StaticResource buttonImageIconStyle}"
                                ShowText="false"
                                ToolTip="Execute Search"
                                ToolTipService.ShowOnDisabled="True" 
                                Click="btnFind_Click">
            </common:ImageButton>
        </StackPanel>
    </DockPanel>


    Randy

    Friday, July 12, 2013 11:56 AM

Answers

  • Hi. there is still a width set on the SearchTextBox if you take that out it should resize (you can always use the left and right margins to squeeze it in a bit).
    Friday, July 12, 2013 2:04 PM

All replies

  • Remove width=60 property of SearchTextBox  from your code.


    Do not Forget to Vote as Answer/Helpful, please. It encourages us to help you.

    • Proposed as answer by JayChase Friday, July 12, 2013 12:10 PM
    Friday, July 12, 2013 12:01 PM
  • I think there are a couple more problems. The last child in the DockPanel is the StackPanel that contains the image button this should be swapped around so it is the one containing the TextBox. Also a StackPanel isn't really good for stretching content so maybe change the StackPanel containing the TextBox to a content control. I've edited your XAML but not had a chance to debug it so there maybe some typos.

    <DockPanel Grid.Row="0" Grid.Column="0" LastChildFill="True" Background="WhiteSmoke"
                VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <StackPanel Orientation="Horizontal" 
                    VerticalAlignment="Center" HorizontalAlignment="Right" DockPanel.Dock="Left">
            <ComboBox Name="_selectGraphicalOrNonGraphicalTree" 
                        Width="121">
                <ComboBoxItem>Graphical</ComboBoxItem>
                <ComboBoxItem>Non-Graphical</ComboBoxItem>
            </ComboBox>
        </StackPanel>
        <StackPanel Margin="10, 5" Orientation="Horizontal" 
                    VerticalAlignment="Center" HorizontalAlignment="Right" DockPanel.Dock="Right">
            <common:ImageButton x:Name="btnFind" 
                                Image="{StaticResource findImageSource}" 
                                Style="{StaticResource buttonImageIconStyle}"
                                ShowText="false"
                                ToolTip="Execute Search"
                                ToolTipService.ShowOnDisabled="True" 
                                Click="btnFind_Click">
            </common:ImageButton>
        </StackPanel>
    	<ContentControl Orientation="Horizontal" 
                    VerticalAlignment="Center" HorizontalAlignment="Stretch">
            <common:SearchTextBox x:Name="_searchTextBox" 
                                    VerticalAlignment="Center" HorizontalAlignment="Stretch"
                                    Label="Enter search text here."
                                    Text="{Binding SearchText}"
                                    ToolTip="Enter search text here." 
                                    PreviewKeyDown="_searchTextBox_PreviewKeyDown" 
                                    PreviewMouseRightButtonDown="_searchTextBox_PreviewMouseRightButtonDown" 
                                    TextChanged="_searchTextBox_TextChanged">
                <common:SearchTextBox.InputBindings>
                    <KeyBinding Key="Enter"
                                Command="{Binding ElementName=_thisTabularView, Path=DataContext.FindAdvisories}"
                                CommandParameter="{Binding ElementName=_searchTextBox, Path=Text}" />
                </common:SearchTextBox.InputBindings>
            </common:SearchTextBox>
        </ContentControl>
    </DockPanel




    • Edited by JayChase Friday, July 12, 2013 12:31 PM typo
    Friday, July 12, 2013 12:29 PM
  • I've modified the code with inputs from both responses. It's definitely getting better, but the textbox still doesn't stretch when I resize the dialog box that contains this code. Any other suggestions, or at least a thought on why setting HorizontalAlignment to Stretch doesn't do anything?

    Thanks....

            <DockPanel Grid.Row="0" Grid.Column="0" LastChildFill="True" Background="WhiteSmoke"
                        VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <StackPanel Margin="5, 5" Orientation="Horizontal" 
                            VerticalAlignment="Center" HorizontalAlignment="Left">
                    <ComboBox Name="_selectGraphicalOrNonGraphicalTree" 
                                Width="110">
                        <ComboBoxItem>Graphical</ComboBoxItem>
                        <ComboBoxItem>Non-Graphical</ComboBoxItem>
                    </ComboBox>
                </StackPanel>
                <StackPanel Margin="5, 5" Orientation="Horizontal" 
                            VerticalAlignment="Center" HorizontalAlignment="Right" DockPanel.Dock="Right">
                    <common:ImageButton x:Name="btnFind" 
                                        Image="{StaticResource findImageSource}" 
                                        Style="{StaticResource buttonImageIconStyle}"
                                        ShowText="false"
                                        ToolTip="Execute Search"
                                        ToolTipService.ShowOnDisabled="True" 
                                        Click="btnFind_Click">
                    </common:ImageButton>
                </StackPanel>
                <ContentControl VerticalAlignment="Center" HorizontalAlignment="Stretch">
                                
                    <common:SearchTextBox x:Name="_searchTextBox" 
                                            Label="Enter search text here."
                                            Text="{Binding SearchText}"
                                            ToolTip="Enter search text here." 
                                            PreviewKeyDown="_searchTextBox_PreviewKeyDown" 
                                            PreviewMouseRightButtonDown="_searchTextBox_PreviewMouseRightButtonDown" Width="65">
    
                        <common:SearchTextBox.InputBindings>
                            <KeyBinding Key="Enter"
                                        Command="{Binding ElementName=_thisTabularView, Path=DataContext.FindAdvisories}"
                                        CommandParameter="{Binding ElementName=_searchTextBox, Path=Text}" />
                        </common:SearchTextBox.InputBindings>
                    </common:SearchTextBox>
                </ContentControl>
    
            </DockPanel>


    Randy

    Friday, July 12, 2013 1:31 PM
  • Hi. there is still a width set on the SearchTextBox if you take that out it should resize (you can always use the left and right margins to squeeze it in a bit).
    Friday, July 12, 2013 2:04 PM
  • That fixed it. Many thanks all!

    Randy

    Friday, July 12, 2013 2:34 PM