UWP中移除Picker的carat后如何消除其占用的空白区域？

嘿，这个问题我熟！你之前的操作只是隐藏了下拉箭头，但箭头所在的容器还占着空间，所以文本被挤得显示不全。咱们可以从以下几个地方修改那个帖子里的ComboBox样式代码（因为Xamarin.Forms的Picker在UWP里对应原生ComboBox）：

1. 消除下拉按钮的占位空间 #

找到样式里的ToggleButton（也就是原来承载箭头的控件），不要只设置Visibility="Collapsed"，还要给它加上Width="0"和Margin="0"，让它彻底不占空间。比如：

<ToggleButton x:Name="DropDownButton"
              Grid.Column="1"
              Width="0"
              Margin="0"
              Focusable="False"
              IsTabStop="False"
              Visibility="Collapsed"/>

如果原来的代码里用了自定义的Template，也可以直接把模板里的箭头元素删掉，同时把ToggleButton的尺寸设为0。

2. 调整内容区域的边距 #

找到样式里的ContentPresenter，它负责显示Picker的文本内容。原来的ContentPresenter可能右边留了箭头的边距（比如Margin="0,0,32,0"），把右边的边距改成0，让文本能占满整个控件宽度：

<ContentPresenter x:Name="ContentPresenter"
                  Grid.Column="0"
                  Margin="4,0,0,0" <!-- 把右边的边距从32改成0，可保留左边小边距优化视觉 -->
                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                  Content="{TemplateBinding SelectionBoxItem}"
                  ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                  ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>

3. 优化Grid列定义（可选） #

如果样式里的Grid是分两列（一列放内容，一列放箭头按钮），可以把第二列的宽度设为0，或者直接删掉第二列，让ContentPresenter占满整个Grid：

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <!-- 删掉第二列，或者把宽度设为0 -->
    <!-- <ColumnDefinition Width="0"/> -->
</Grid.ColumnDefinitions>

这样修改后，原来箭头的空白区域就会被消除，文本就能完整显示啦！

内容的提问来源于stack exchange，提问作者Little Kid