Vishal
Vishal

Reputation: 6368

using webdings and alphabets together

I have Four Buttons.

When user clicks on any button I want its text in label along with right side arrow as image below.

enter image description here

Is it possible?

What I exactly want is :

enter image description here

Upvotes: 0

Views: 2448

Answers (1)

Martin Liversage
Martin Liversage

Reputation: 106826

The contents of a Button can be almost anything. You could draw the right arrow using the geometric primitives of WPF and place it together with the text using a panel.

However, in your case a TextBlock with an extra Run using the Webdings font is sufficient:

<Button>
  <TextBlock>Bitmaps <Run FontFamily="Webdings">4</Run></TextBlock>
</Button>

It is still not clear to me what you are asking about but let me try to provide some more information.

I mean using vb.net or c# instead of xaml?

In WPF you commonly want to design your UI in XAML and then either name elements in XAML and access from code-behind or use data-binding to bind to a view-model (MVVM style). However, XAML is just a notation used to declare object graphs and you can build that object graph in code if you want to:

var textBlock = new TextBlock();
textBlock.Text = "Bitmaps ";
var run = new Run();
run.Text = "4";
run.FontFamily = new FontFamily("Webdings");
textBlock.Inlines.Add(run);
var button = new Button();
button.Content = textBlock;

I find XAML much easier to comprehend compared to the C# version.

If what you really want to do is to have a dynamic user interface and you don't know how to achieve that using XAML I demonstrate here how you can do it using MVVM. Initially I create a very simple view-model that contains the items to be displayed:

class ViewModel {

  public ViewModel() {
    Items = new ObservableCollection<String>();
  }

  public ObservableCollection<String> Items { get; private set; }

}

Somewhere in my code I need to create the view-model and set is as the data context of whatever that is displayed (typically a Window, UserControl or Page). For simplicity I do it here in the constructor of my window:

public MainWindow() {
  InitializeComponent();
  var viewModel = new ViewModel();
  viewModel.Items.Add("Computer");
  viewModel.Items.Add("SetUp (D:)");
  viewModel.Items.Add("DELL Webcam");
  viewModel.Items.Add("Bitmaps");
  DataContext = viewModel;
}

To display the list of items I use this XAML:

<ItemsControl ItemsSource="{Binding Items}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <TextBlock>
        <TextBlock.Inlines>
          <Run Text="{Binding Mode=OneWay}"/>
          <Run Text="4" FontFamily="Webdings"/>
          <Run Text=" "/>
        </TextBlock.Inlines>
      </TextBlock>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
</ItemsControl>

Each item is rendered using a TextBlock with the extra Run to display the triangle. The items are then stacked horizontally using a StackPanel.

The ViewModel.Items collection is implemented using ObservableCollection<T> so when items are added or removed during runtime the user interface is updated accordingly without any extra C# code. All is taken care of by the data-binding framework in WPF.

Upvotes: 3

Related Questions