将文字添加到带有图标

时间:2017-05-29 10:15:16

标签: c# uwp uwp-xaml

我有一个带反馈中心图标的按钮(Segoe MDL2资产),我想在图标后添加文字:“反馈”,但由于我已经有图标,因此可以添加文字? 以下是我的按钮示例:

<Button x:Name="feedbackButton" FontFamily="Segoe MDL2 Assets" Content="&#xE939;" Click="feedbackButton_Click"/>

我尝试:Content="&#xE939; Feedback";,但“反馈”一词不会出现!

5 个答案:

答案 0 :(得分:5)

尝试将图标文字和文字放在unhandled promise rejection的{​​{1}}个单独的Run中 -

TextBlock

更新

这不是OP想要的吗?为什么downvote ??

enter image description here

答案 1 :(得分:1)

Button是一个ContentControl。它的XAML内容属性是Content,它为XAML启用了这样的语法:按钮的内容。您可以将任何对象设置为按钮的内容。如果内容是UIElement,则会在按钮中呈现。如果内容是另一种类型的对象,则其字符串表示形式将显示在按钮中。 这里,包含橙色和文本图像的StackPanel被设置为button.3的内容。

<Button>
   <StackPanel>
      <TextBlock Grid.Column="0" FontFamily="Segoe MDL2 Assets" 
            Text="&#xE939;" VerticalAlignment="Center"/>
      <TextBlock Grid.Column="1" Text="Feedback" Margin="10,0,0,0" 
            VerticalAlignment="Center" />
   </StackPanel>
</Button>

我改变了代码。我希望这就是你要找的东西

答案 2 :(得分:1)

我会做这样的事情:

  • 定义自定义控件func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) { print ("Eror: \(error.localizedDescription)") }

    ButtonWithIcon

特别是我添加了public class ButtonWithIcon : Button { public static readonly DependencyProperty IconContentProperty = DependencyProperty.Register("IconContent", typeof(string), typeof(ButtonWithIcon), new PropertyMetadata(default(Icon))); public string IconContent { get => (string)GetValue(IconContentProperty); set => SetValue(IconContentProperty, value); } } 来启用图标代码的特定绑定。

  • 然后,我会在DependencyProperty中定义该控件的样式:

    App.xaml

特别是我添加了一个<Style x:Key="buttonWithIconStyle" TargetType="customControls:ButtonWithIcon"> <Setter Property="FocusVisualStyle" Value="{x:Null}" /> <Setter Property="Background" Value="Transparent" /> <Setter Property="BorderBrush" Value="#cccccc" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="FontFamily" Value="Segoe UI" /> <Setter Property="Foreground" Value="#333333" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="Padding" Value="16,3,16,3" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type customControls:ButtonWithIcon}"> <Border Name="Chrome" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true"> <StackPanel Margin="8,0" HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Vertical"> <TextBlock x:Name="Icon" Foreground="White" HorizontalAlignment="Center" FontFamily="Segoe UI Symbol" Text="{Binding IconContent, RelativeSource={RelativeSource TemplatedParent}}"/> <TextBlock x:Name="Text" Text="{TemplateBinding Content}" FontFamily="Segoe UI Light" FontSize="10" HorizontalAlignment="Center" Foreground="White" /> </StackPanel> </Border> <ControlTemplate.Triggers> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="White" /> </Trigger> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#000000" /> <Setter Property="BorderBrush" Value="#cccccc" /> <Setter Property="Foreground" Value="White" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" Value="#999999" /> <Setter Property="BorderBrush" Value="{StaticResource MainColor}" /> <Setter Property="Foreground" Value="White" /> </Trigger> <Trigger Property="IsFocused" Value="true"> <Setter TargetName="Chrome" Property="BorderBrush" Value="{StaticResource MainColor}" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> 来包含带有纯文本的StackPanel属性和带有图标代码的Content属性。

  • 最后,您可以像这样使用它:

    IconContent
  • 请记住在Window的引用中引用自定义控件:

    <customControls:ButtonWithIcon
        Style="{StaticResource "buttonWithIconStyle"}"
        IconContent="&#xE14C;"
        Content="Some text" />
    

答案 3 :(得分:1)

您可以使用内置的https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.AppBarButton AppBarButton控件或使用其样式。

答案 4 :(得分:1)

您可以在按钮中放置 StackPanel ,然后在 StackPanel 中添加任意数量的 TextBlocks 需要:

   <Button x:Name="feedbackButton" Click="feedbackButton_Click">
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="&#xE939;" FontFamily="Segoe MDL2 Assets" VerticalAlignment="Center"/>
            <TextBlock Text="Feedback" VerticalAlignment="Center" Margin="8,0,0,0"/>
        </StackPanel>
    </Button>