椭圆 WPF 中的文本框答案

【问题标题】：TextBox inside an Ellipse WPF椭圆 WPF 中的文本框
【发布时间】：2021-12-29 03:21:34
【问题描述】：

我正在尝试将过滤添加到我的 WPF 应用程序中，所以我想我想要一个椭圆，其中将是一个 TextBox，其文本将绑定到我的 ViewModel 中的 FilterText 属性。

我尝试过的：

<TextBox
      Width="30"
      Height="30">
      <TextBox.Template>
            <ControlTemplate>
                  <Grid>
                        <Ellipse Stroke="Black" StrokeThickness="1" />
                        <ContentPresenter
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Content="{Binding FilterText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                              TextElement.Foreground="Black" />
                  </Grid>
            </ControlTemplate>
      </TextBox.Template>
</TextBox>

我从同一个例子中得到了这个，但使用了标签。

这会显示椭圆，但里面没有文本框。

如何使用文本框创建椭圆？

【问题讨论】：

ContentPresenter 不支持编辑。请改用<ScrollViewer x:Name="PART_ContentHost" /> 并绑定TextBox 的Text 属性。详情见TextBox Styles and Templates
还不清楚为什么 Ellipse 需要在模板中。你也可以把一个 Ellipse 和一个普通的 TextBox 放在一个普通的 Grid 单元格中。

标签： c# wpf textbox ellipse

【解决方案1】：

试试这个

<Grid>
    <Ellipse Stroke="Black" StrokeThickness="1"/>
    <TextBox Text="{Binding FilterText, UpdateSourceTrigger=PropertyChanged}"
             VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>

【讨论】：

【解决方案2】：

通过将TextBox 包裹在Border 中并设置Border 的CornerRadius 来修复它：

<Border
       Width="30"
       Height="30"
       BorderBrush="Black"
       BorderThickness="1"
       CornerRadius="30">
       <TextBox
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              HorizontalContentAlignment="Center"
              VerticalContentAlignment="Center"
              Background="Transparent" //important to lose the TextBox look
              BorderBrush="Transparent" //important to lose the TextBox look
              BorderThickness="0" //important to lose the TextBox look
              Text="{Binding FilterText, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</Border>

【讨论】：