椭圆 WPF 中的文本框

Posted 2023-04-01

【中文标题】椭圆 WPF 中的文本框

【英文标题】：TextBox inside an Ellipse 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 单元格中。

【参考方案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>