Question

How can I get a wrappanel like the pics below? The two button < > and textblock align to left, and the textbox align to right, when I resize width of windows, the textbox auto wrap to new line.

Answer 1

Here is a quick and dirty way of doing it.

    <WrapPanel Orientation="Horizontal" SizeChanged="WrapPanel_SizeChanged">
        <TextBlock x:Name="DateTextBlock" TextWrapping="Wrap" MinWidth="280"><Run Text="July 03-09, 2011"/></TextBlock>
        <TextBox x:Name="SearchTextBox" Width="250"  HorizontalAlignment="Right" />
    </WrapPanel>

Then in your your WrapPanel_SizeChanged handler you simply make the DataTextBlock as wide as possible – as wide as the panel less the width of the Search TextBox.

    private void WrapPanel_SizeChanged(object sender, System.Windows.SizeChangedEventArgs e)
    {
        var panel = (WrapPanel)sender;

        var maxWidth = panel.ActualWidth - SearchTextBox.ActualWidth;
        DateTextBlock.Width = maxWidth;
    }