Share via

how to set the width of TextBox to the width of parent?

Sarah 186 Reputation points
2022-02-21T11:31:20.137+00:00

I want to set the width of TextBox to the width of parent element (with a subtraction of a constant) as follows but I get an error:

Width="{Binding (FrameworkElement.ActualWidth  - 20), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"

Any idea how I should fix the error? Or how I can set the width to a percentage value of the parent?

Developer technologies | Windows Presentation Foundation
0 comments No comments

4 answers

Sort by: Most helpful
  1. Ken Tucker 5,866 Reputation points
    2022-02-21T11:50:18.827+00:00

    You try something like to set the textbox to the width of the parent and use a margin for your subtraction

     <TextBox HorizontalAlignment="Stretch" Margin="0,0,20,0"
    
    1 person found this answer helpful.

  2. Hui Liu-MSFT 48,711 Reputation points Microsoft External Staff
    2022-02-22T03:10:23.75+00:00

    You could try to set MaxWidth for TextBox.

    <ListView Grid.Column="0" x:Name="ContactListView" ItemsSource="{Binding View}">  
                <ListView.ItemTemplate>  
                    <DataTemplate x:Name="SingleLineDataTemplate" >  
                        <StackPanel Orientation="Horizontal" Height="44" >  
                            <Image Source="spring.jpg" Height="16" Width="16" VerticalAlignment="Center"/>  
                            <TextBox Text="{Binding Text}" Padding="1" MaxWidth="300" TextWrapping="Wrap" VerticalAlignment="Center" Margin="12,0,0,0"/>  
                        </StackPanel>  
                    </DataTemplate>  
                </ListView.ItemTemplate>  
      </ListView>  
    

    Update:

    <Grid x:Name="grid">  
            <Grid.ColumnDefinitions>  
                <ColumnDefinition />  
                <ColumnDefinition Width="90" />  
            </Grid.ColumnDefinitions>  
            <ListView Grid.Column="0" x:Name="ContactListView" Width="{Binding  Path=ActualWidth, ElementName=grid, Converter={local:PercentageConverter}, ConverterParameter='0.7'}" ItemsSource="{Binding View}" >  
                <ListView.ItemTemplate>  
                    <DataTemplate>  
                        <StackPanel  Orientation="Horizontal" >  
                            <Image  Width="15" Source="spring.jpg" />  
                            <Border x:Name="b"  BorderThickness="2"  BorderBrush="Gray" Height="50" >  
                                <TextBox Text="{Binding Text}" TextWrapping="Wrap"   
                                         Width="{Binding  Path=ActualWidth, ElementName=ContactListView, Converter={local:PercentageConverter}, ConverterParameter='0.9'}"/>  
                            </Border>  
                        </StackPanel>  
                    </DataTemplate>  
                </ListView.ItemTemplate>  
            </ListView>  
        </Grid>  
      
     public class PercentageConverter : MarkupExtension, IValueConverter  
      {  
        private static PercentageConverter _instance;  
      
        #region IValueConverter Members  
      
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
          return System.Convert.ToDouble(value) * System.Convert.ToDouble(parameter);  
        }  
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
          throw new NotImplementedException();  
        }  
      
        #endregion  
      
        public override object ProvideValue(IServiceProvider serviceProvider)  
        {  
          return _instance ?? (_instance = new PercentageConverter());  
        }  
      }  
    

    The result:
    177359-15.gif


    If the response is helpful, please click "Accept Answer" and upvote it.
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


  3. Sarah 186 Reputation points
    2022-02-21T19:54:50.697+00:00

    Hi, I tried your code. I still have the same problem. The TextBox goes over the edge of the ListView

    176460-error.png


  4. Peter Fleischer (former MVP) 19,351 Reputation points
    2022-02-21T16:18:52.737+00:00

    Hi Sarah,
    I think is better to use ItemContainerStyle like this:

    <ListView ItemsSource="{Binding View}" 
              Margin="5"
              HorizontalContentAlignment="Stretch"
              ScrollViewer.HorizontalScrollBarVisibility="Disabled">
      <ListView.ItemTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="35"/>
              <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" 
                   Width="15" 
                   Height="15" 
                   Source="images/Paint.png" />
            <Border x:Name="b" 
                    Grid.Column="1" 
                    Margin="5">
            <TextBox Grid.Column="1" 
                     Text="{Binding Text}" 
                     TextWrapping="Wrap" 
                     Width="{Binding ActualWidth, ElementName=b}"/>
            </Border>
          </Grid>
        </DataTemplate>
      </ListView.ItemTemplate>
      <ListView.ItemContainerStyle>
        <Style TargetType="{x:Type ListViewItem}">
          <Setter Property="BorderBrush" Value="CadetBlue" />
          <Setter Property="BorderThickness" Value="0,2,0,2" />
          <Setter Property="Margin" Value="0,5,0,5" />
        </Style>
      </ListView.ItemContainerStyle>
    </ListView>
    
    0 comments No comments

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.