¿Cómo hacer un TextBox con un botón dentro de WPF?

Question

Me gustaría hacer un TextBox con un Button dentro, algo así como un DatePicker, pero no exactamente. O puede ser un ComboBox dentro del TextBox, por lo que puede cambiar el modo del TextBox.

¿Me puede ayudar?

Answer 1

Si desea algo como un combobox o un selector de fecha y hora, debe crear un nuevo control, dentro de este nuevo control coloque un cuadro de texto y un botón uno al lado del otro dentro de un cuadro de texto. restyle el cuadro de texto para que no tenga un marco.

poner un botón dentro de una edición enriquecida es genial si desea poner un botón dentro de un "documento" pero no es un buen sustituto para un cuadro combinado.

Ver la plantilla de control ComboBox MSDN

Answer 2

Puede usar RichTextBox en lugar de textbox y es compatible con flowdocument en el que puede colocar el botón en él.

Answer 3

También puede utilizar una etiqueta y cambiar su plantilla para incluir un botón en ella. Para tener una buena visión general de las diferencias entre Label y TextBlock, consulte this post.

Answer 4

Creé un control de cuadro de texto y agregué este Parece que funciona, pero no es la situación ideal porque recrea otro cuadro de texto.

<TextBox.Template> 
<ControlTemplate> 
     <Grid> 
      <Grid.ColumnDefinitions></Grid.ColumnDefinitions> 
      <TextBox Grid.Column="0"></TextBox> 
      <Button HorizontalAlignment="Right" Width="25" Grid.Column="1"> 
      </Button> 
     </Grid>   
    </ControlTemplate> 
</TextBox.Template> 

Answer 5

Puede encontrar este enlace ayuda: http://msdn.microsoft.com/en-us/library/ms752068(VS.85).aspx.

"La plantilla de control para un cuadro de texto debe contener exactamente un elemento etiquetado como el elemento de host de contenido; este elemento se usará para representar el contenido del cuadro de texto. Para etiquetar un elemento como el servidor de contenido, asígnele el name PART_ContentHost. El elemento de host de contenido debe ser ScrollViewer o AdornerDecorator. El elemento de host de contenido no puede albergar ningún elemento secundario. "

Answer 6

El método correcto de hacerlo es utilizar una plantilla de control en el cuadro de texto. Algo como abajo. Usé esto dentro de una clase que hereda de textbox y lo llamé ButtonBox. luego heredo a otros de esta tales como datebox, DateTimeBox, etc. SqlServerConnectBox

xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" 

<TextBox.Template> 
    <ControlTemplate TargetType="{x:Type TextBoxBase}"> 
     <mwt:ListBoxChrome 
      Background="{TemplateBinding Panel.Background}" 
      BorderBrush="{TemplateBinding Border.BorderBrush}" 
      BorderThickness="{TemplateBinding Border.BorderThickness}" 
      RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" 
      RenderFocused="{TemplateBinding UIElement.IsKeyboardFocusWithin}" 
      Name="Bd" 
      SnapsToDevicePixels="True"> 

      <DockPanel> 
       <Button DockPanel.Dock="Right" Name="myButton" Padding="3,0" Click="myButton_Click">...</Button> 
       <ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"></ScrollViewer> 
      </DockPanel> 
     </mwt:ListBoxChrome> 
     <ControlTemplate.Triggers> 
      <Trigger Property="UIElement.IsEnabled"> 
       <Setter Property="Panel.Background" TargetName="Bd"> 
        <Setter.Value> 
         <DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" /> 
        </Setter.Value> 
       </Setter> 
       <Setter Property="TextElement.Foreground"> 
        <Setter.Value> 
         <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" /> 
        </Setter.Value> 
       </Setter> 
       <Trigger.Value> 
        <s:Boolean>False</s:Boolean> 
       </Trigger.Value> 
      </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
</TextBox.Template> 

Editar: Tengo cambiar el método que estaba usando para que se hereda de control y no de texto. Esto funciona bien porque el control solo consiste en un borde, un cuadro de texto y un botón. Estaba teniendo problemas de enfoque con la solución anterior. Esta es una nueva plantilla, he llamado a mi control un ButtonBox

<Style TargetType="{x:Type local:ButtonBox}"> 
    <Setter Property="Border.BorderThickness" Value="1"></Setter> 
    <Setter Property="Border.BorderBrush"> 
     <Setter.Value> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="0,20" MappingMode="Absolute"> 
       <LinearGradientBrush.GradientStops> 
        <GradientStop Color="#FFABADB3" Offset="0.05" /> 
        <GradientStop Color="#FFE2E3EA" Offset="0.07" /> 
        <GradientStop Color="#FFE3E9EF" Offset="1" /> 
       </LinearGradientBrush.GradientStops> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Control.Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type local:ButtonBox}"> 
       <mwt:ListBoxChrome 
        Background="{TemplateBinding Panel.Background}" 
        BorderThickness="{TemplateBinding Border.BorderThickness}" 
        BorderBrush="{TemplateBinding Border.BorderBrush}" 
        RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" 
        RenderFocused="{TemplateBinding UIElement.IsKeyboardFocusWithin}" 
        Name="Bd" 
        SnapsToDevicePixels="True"> 
        <DockPanel> 
         <Button 
          DockPanel.Dock="Right" 
          Name="PART_Button" 
          Height="0" 
          Style="{x:Null}" 
          Margin="0" 
          Padding="3,0" 
          Content="{TemplateBinding local:ButtonBox.ButtonContent}" 
          IsTabStop="False">         
         </Button> 
         <TextBox 
          BorderBrush="{x:Null}" 
          BorderThickness="0" 
          Margin="0" 
          Name="PART_ContentHost" 
          IsReadOnly="{TemplateBinding TextBox.IsReadOnly}" 
          Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Path=Text}">         
         </TextBox> 
         <!-- ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" Margin="1"></ScrollViewer --> 
        </DockPanel> 
       </mwt:ListBoxChrome> 
       <ControlTemplate.Triggers> 
        <Trigger Property="UIElement.IsEnabled"> 
         <Setter Property="Panel.Background" TargetName="Bd"> 
          <Setter.Value> 
           <DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" /> 
          </Setter.Value> 
         </Setter> 
         <Setter Property="TextElement.Foreground"> 
          <Setter.Value> 
           <DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" /> 
          </Setter.Value> 
         </Setter> 
         <Trigger.Value> 
          <s:Boolean>False</s:Boolean> 
         </Trigger.Value> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="IsTabStop" Value="False"></Setter> 
</Style> 

Answer 7

Puede usar una cuadrícula para realizar esta tarea. La siguiente es la forma en que he creado un botón que aparece en la parte inferior derecha de un Cuadro de texto:

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

     <TextBox VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Row="0" /> 

     <Button Content="Copy" Width="40" Height="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="10" Grid.Row="0" /> 

</Grid> 

Answer 8

sólo tiene que utilizar Grid.Column misma, como a continuación código

<TextBox x:Name="txtUrl" Grid.Column="1" Margin="2,2,0,2" VerticalAlignment="Center" Padding="2" PreviewKeyDown="txtUrl_PreviewKeyDown" GotFocus="txtUrl_GotFocus" PreviewMouseDown="txtUrl_PreviewMouseDown"> 

</TextBox> 
<eo:BareButton x:Name="btnAddFavorite" Grid.Column=" 1" HorizontalAlignment="Right" Style="{StaticResource WindowButtonStyle }" Margin="2" > 
    <eo:BareButton.Template> 
     <ControlTemplate TargetType="{x:Type eo:BareButton}"> 
      <Border x:Name="PART_Border" Width="22" Height="22" Background="Transparent" VerticalAlignment="Center" Margin="2,0,0,0" CornerRadius="2"> 
       <Path 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" 
                  Fill="Yellow" 

      Data="M 2,9 L 8,8 10,2 13,8 19,9 15,13 16,19 10,15 5,19 6,13 2,9" 
     SnapsToDevicePixels="false" 
      Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type eo:BareButton}, Mode=FindAncestor}}" 
      StrokeThickness="1" /> 
      </Border> 
      <ControlTemplate.Triggers> 
       <Trigger Property="IsMouseOver" Value="True"> 
        <Setter TargetName="PART_Border" Property="BorderBrush" Value="#666"/> 
        <Setter TargetName="PART_Border" Property="BorderThickness" Value="1"/> 
       </Trigger> 
      </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </eo:BareButton.Template> 

</eo:BareButton>