Come creare un TextBox con un pulsante all'interno di WPF?

Question

Mi piacerebbe creare un TextBox con un Button all'interno, qualcosa come un DatePicker, ma non esattamente. Oppure può essere un ComboBox all'interno dello TextBox, quindi è possibile cambiare la modalità di TextBox.

Potete aiutarmi?

Answer 1

Se si desidera qualcosa come una casella combinata o una selezione di orario, è necessario creare un nuovo controllo, all'interno di questo nuovo punto di controllo una casella di testo e un pulsante affiancati all'interno di una cornice simile alla cornice di una casella di testo, quindi ridisporre la casella di testo in modo che non abbia una cornice.

inserire un pulsante in una modifica avanzata è ottimo se si desidera inserire un pulsante in un "documento" ma non un buon sostituto per una casella combinata.

vedere il modello di controllo ComboBox MSDN

Answer 2

È possibile utilizzare RichTextBox anziché la casella di testo e supporta flowdocument in cui è possibile posizionare il pulsante.

Answer 3

È inoltre possibile utilizzare un'etichetta e cambiare il suo modello di includere un pulsante in esso. Per avere una buona panoramica delle differenze tra Label e TextBlock vedere this post.

Answer 4

Ho creato un controllo casella di testo e ho aggiunto questo Sembra funzionare, ma non la situazione ideale in quanto ricrea un'altra casella di testo.

<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

Si possono trovare questo link aiuta: http://msdn.microsoft.com/en-us/library/ms752068(VS.85).aspx.

"Il ControlTemplate per un oggetto di testo deve contenere esattamente un elemento contrassegnato come elemento dell'host del contenuto, questo elemento verrà utilizzato per il rendering del contenuto del controllo TextBox. Per contrassegnare un elemento come host del contenuto, assegnarlo allo speciale nome PART_ContentHost. L'elemento host del contenuto deve essere ScrollViewer o AdornerDecorator e l'elemento host del contenuto non può ospitare alcun elemento figlio. "

Answer 6

Il metodo corretto per eseguire questa operazione consiste nell'utilizzare un modello di controllo nella casella di testo. Qualcosa come sotto. L'ho usato all'interno di una classe che eredita dalla casella di testo e la chiamavo ButtonBox. Poi ho ereditato gli altri da questo, come DateBox, DateTimeBox, SqlServerConnectBox ecc

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> 

Edit: ho modificare il metodo che usavo in modo che eredita dal controllo e non di testo. Funziona bene perché il controllo consiste solo di un bordo, una casella di testo e un pulsante. Stavo ottenendo problemi di messa a fuoco con la soluzione di cui sopra. Questo nuovo modello è, ho chiamato il mio controllo 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

È possibile utilizzare una griglia per eseguire questa operazione. Quello che segue è come ho creato un pulsante che compare in basso a destra di una TextBox:

<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

Basta usare Grid.Column stesso come sottostante Codice

<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>