I want to have a number-box like the image below, where the user can always see the maximum value [in my project the minimum value is always 1 and does not need to be shown], Is this possible? How should I do this?
<muxc:NumberBox Name="NumberBoxSpinButtonPlacementExample"
Header="Page"
Value="12" Minimum="1" Maximum="128"
SpinButtonPlacementMode="Compact"
SmallChange="1" LargeChange="10"
Width="100"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
I found the following code in this links [ WinUI NumberBox Control ], I think I should use this method, maybe not, I do not know
private DecimalFormatter DutchDecimalFormatter { get; } =
new DecimalFormatter(new[] { "nl-NL" }, "NL")
{
IsGrouped = true,
FractionDigits = 2,
NumberRounder = new IncrementNumberRounder {
Increment = 0.01,
RoundingAlgorithm = RoundingAlgorithm.RoundHalfUp,
}
};
Result :
<RelativePanel VerticalAlignment="Center" HorizontalAlignment="Center">
<muxc:NumberBox x:Name="nb1"
Header="صفحات"
Value="604" Minimum="1" Maximum="604"
SpinButtonPlacementMode="Compact"
SmallChange="1" LargeChange="10"
Width="100"/>
<Grid RelativePanel.AlignRightWith="nb1" Margin="0,24,30,0" Height="30" Background="#FF666666">
<TextBlock Name="nb1MaxValue" Text="604"
Foreground="White"
Padding="5,0"
VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Grid>
</RelativePanel>
But why one number has an English format and the other a Persian format !!! O_O
NumberBox represents a control that can be used to display and edit numbers.
In your scenior, Number formatting can be used to format the value of a Numberbox, its result is still a number, not an expression such as 12/128.
I suggest that you could write a TextBlock to cover the NumberBox through RelativePanel like following.
<Page
……
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<RelativePanel BorderBrush="Red" BorderThickness="2" CornerRadius="10" Padding="12">
<muxc:NumberBox x:Name="MyNumberBox"
Header="Page" Value="15"
Minimum="1" Maximum="128"
SpinButtonPlacementMode="Compact"
SmallChange="1" LargeChange="10"
Width="150"
VerticalAlignment="Center"
HorizontalAlignment="Center" d:IsHidden="True"/>
<TextBlock x:Name="MyTextBlock" Text="/128" Margin="50,-30,0,0" RelativePanel.Below="MyNumberBox"/>
</RelativePanel>
</Grid>
</Page>
Result:
Related
I have five definitions of DataTemplate in my window, according with a CantidadLlantas property, I choose one of these to show it. Until here all works fine.
But, in each DataTemplate there are some TextBox with Text property binding to one property in my ViewModel, and this isn't working, if I show these same properties in TextBoxes out of the DataTemplates the values shown are ok, is like if the binding not is binding into the DataTemplates... Why?
One of the templates the more simple is the next:
<Window.Resources>
<DataTemplate x:Name="Llantas2Template" x:Key="Llantas2Template" DataType="ContentControl">
<Grid Name="grdLlantas">
<Border Name="borLlantas" BorderBrush="Black" BorderThickness="1" Margin="0,0,0,0" Background="DarkSeaGreen" />
<Rectangle Fill="Yellow" HorizontalAlignment="Left" Height="30" Stroke="Black" VerticalAlignment="Top" Width="5" Margin="0,16,0,0" />
<Rectangle Fill="Yellow" HorizontalAlignment="Left" Height="30" Stroke="Black" VerticalAlignment="Top" Width="5" Margin="0,130,0,0" />
<Rectangle HorizontalAlignment="Left" Height="175" Stroke="Black" StrokeThickness="3" VerticalAlignment="Top" Width="70" Margin="20,10,10,10" />
<Line X1="230" Y1="10" X2="230" Y2="150" Stroke="Black" StrokeThickness="3" />
<Ellipse Fill="Black" Height="25" Width="10" StrokeThickness="2" Stroke="Black" Margin="180,0,0,10"/>
<TextBox Name="txtLlanta2" Margin="200,10,20,20" ToolTipService.ToolTip="Llanta trasera derecha"
Width="60" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top"
Text="{Binding Llanta2, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Name="txtLlanta1" Margin="200,150,20,10" ToolTipService.ToolTip="Llanta trasera izquierda"
Width="60" Height="25" HorizontalAlignment="Left" VerticalAlignment="Top"
Text="{Binding Llanta1, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
</Grid>
</DataTemplate>
Then in the window I declare a ContentControl into a StackPanel the visibility of which depends of a property in my ViewModel, this works fine:
<StackPanel Name="stkLlantas" Grid.Row="2" Visibility="{Binding IsVisibilityTemplate}" >
<!--Aquí se pondrá el UserControl con el Template de Llantas que corresponde-->
<ContentControl Grid.Row="2" Name="LlantasContent"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Margin="0,10,0,10" />
</StackPanel>
the selection of the template is in behind:
#region DefineTemplate
private void DefineTemplate()
{
switch (cantidadLlantas)
{
case 2:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas2Template");
break;
case 4:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas4Template");
break;
case 6:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas6Template");
break;
case 8:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas8Template");
break;
case 10:
LlantasContent.ContentTemplate = (DataTemplate)this.FindResource("Llantas10Template");
break;
default:
LlantasContent.ContentTemplate = null;
break;
}
}
#endregion
In behind I define the DataContext for my window:
UnidadLlantasVM viewModel;
int cantidadLlantas;
public wUnidadLlantas(string _IDUni, int _CantidadLlantas)
{
this.Loaded += (s, a) =>
{
cantidadLlantas = _CantidadLlantas;
viewModel = new UnidadLlantasVM();
viewModel.IDUni = _IDUni;
viewModel.CantidadLlantas = _CantidadLlantas;
this.DataContext = viewModel;
DefineTemplate();
};
InitializeComponent();
}
And in xaml:
<Window x:Class="MTTO.wUnidadLlantas"
DataContext="{Binding RelativeSource={RelativeSource Self}}"
With test purposes, I add TextBoxes in the window, with the same properties that should be showed into the template and here works fine, anex the image:
all the data sowed in the window are properties of my ViewModel and works fine, but into the template not, the TextBoxes in the picture down should be the same that the TextBoxes pointed in red. What happen? I have a Silverlight project with the same, and there works fine...
Probably you need to bind the DataContext to the ContentControl's Content property (which to me has a little smell of a design flaw in WPF, but never mind).
<StackPanel Name="stkLlantas" Grid.Row="2" Visibility="{Binding IsVisibilityTemplate}" >
<!--Aquí se pondrá el UserControl con el Template de Llantas que corresponde-->
<ContentControl Grid.Row="2" Name="LlantasContent"
Content="{Binding}"
VerticalAlignment="Stretch" HorizontalAlignment="Center"
Margin="0,10,0,10" />
</StackPanel
By the way, consider using a ContentTemplateSelector, for the thing you do in DefineTemplate. This is the default API for template selection.
You would move your existing code and logic from Define Template to SelectTemplate.
https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.contentcontrol.contenttemplateselector?view=windowsdesktop-6.0
https://learn.microsoft.com/en-us/dotnet/api/system.windows.controls.datatemplateselector.selecttemplate?view=windowsdesktop-6.0
I've got one page in my WPF app that should display some "tiles" in number as I specify before. Tile looks like this:
So my page should look something like this:
It is achievable of course by manually cloning tiles, but I want to avoid this (achieve it in more programmatic way). So instead of creating 6 clones I should stick to only one and then if needed add remaining ones. How can I accomplish that? I guess I should create my own UserControl like this:
<Grid HorizontalAlignment="Left" Height="199" VerticalAlignment="Top" Width="207" Background="Black">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<Image x:Name="image1" HorizontalAlignment="Left" Height="175" VerticalAlignment="Top" Width="207" Stretch="UniformToFill"/>
<Grid HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="112" Background="#FFC78D10">
<TextBox IsReadOnly = "True" x:Name="CategoryOfEvent" Height="30" TextWrapping="Wrap" Text="Category" Width="112" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="18" SelectionBrush="{x:Null}" HorizontalAlignment="Left" VerticalAlignment="Top" >
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
<TextBox IsReadOnly = "True" x:Name="HourOfEvent" HorizontalAlignment="Left" Height="28" Margin="0,42,0,0" TextWrapping="Wrap" Text="Hour" VerticalAlignment="Top" Width="148" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FFE2E2E2" FontSize="22" SelectionBrush="{x:Null}" FontWeight="Bold" TextChanged="HourOfEvent_TextChanged">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<TextBox IsReadOnly = "True" x:Name="TitleOfEvent" HorizontalAlignment="Left" Height="88" Margin="0,82,0,0" TextWrapping="Wrap" Text="Title" VerticalAlignment="Top" Width="207" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="20" SelectionBrush="{x:Null}" FontWeight="Bold">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<TextBox IsReadOnly = "True" x:Name="PlaceOfEvent" HorizontalAlignment="Left" Height="24" Margin="0,175,0,0" TextWrapping="Wrap" Text="Where" VerticalAlignment="Top" Width="207" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="14" SelectionBrush="{x:Null}">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
and just add them to my page. I would like also to mention that in every tiles there are 4 textboxes which are displaying some data parsed from Json, so maybe some automatic binding should do the job?
It is as simple as that.Firstly,what you can do is,create a UserControl with all your controls inside like TextBlocks and others.Then,decide which type of container control you want to use to hold your UserControl.Let's assume it's a grid.You can specify/set grid's column/rows for each user control.A sample :
private void addControl()
{
UserControl1 MyCon = new UserControl1;
MyGrid.Children.Add(MyCon);
Grid.SetRow(MyCon , 1); ////replace 1 with required row count
}
You can create grid rows in design time,or u can do it in code behind as well :
MyGrid.RowDefinitions.Add(new RowDefinition);
If you want to use columns instead,just apply same code but change Row/Rowdefinition with Column/ColumnDefinition
Hope this helps :)
The follwing example shows how to create multiple of the tiles you have been posting using a DataTemplate and WrapPanel. The DataTemplate specifies how an object (in this case a TileItem) is visualized. You can create multiple TileItems and then add them to an collection, in order to visualize them all.
Assuming your UI resides in MainWindow, you can create a collection with three items in it.
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TileItemCollection = new ObservableCollection<TileItem>(new []
{
new TileItem(){Category = "Alpha", Hour = "10", Title = "Hello World", Where = "Office"},
new TileItem(){Category = "Beta", Hour = "15", Title = "Test", Where = "Home"},
new TileItem(){Category = "Gamma", Hour = "44", Title = "My Title", Where = "Work"},
});
DataContext = this;
}
public ObservableCollection<TileItem> TileItemCollection { get; }
}
You could load your Items from JSON and create an TileItem for each one in the JSON document. The class for TileItemss can be found below.
public class TileItem : INotifyPropertyChanged
{
private string _hour;
private string _title;
private string _where;
private string _category;
public string Category
{
get => _category;
set
{
if (value == _category) return;
_category = value;
OnPropertyChanged();
}
}
public string Hour
{
get => _hour;
set
{
if (value == _hour) return;
_hour = value;
OnPropertyChanged();
}
}
public string Title
{
get => _title;
set
{
if (value == _title) return;
_title = value;
OnPropertyChanged();
}
}
public string Where
{
get => _where;
set
{
if (value == _where) return;
_where = value;
OnPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
[NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Note that in order for datachanges to be propagated to the UI, all properties which should be updated in the UI when you update them in code need to raise the property changed event. In this example all properties do this by default.
You can then update the XAML to bind to a collection. The ItemsControl acts as a container for the tiles. If you scroll down further you may notice the use of WrapPanel which is responsible for the item wrapping effect when you resize the control.
<ItemsControl ItemsSource="{Binding TileItemCollection}" Margin="20">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:TileItem}" >
<Grid HorizontalAlignment="Left" Height="199" VerticalAlignment="Top" Width="207" Background="Black">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="0*"/>
</Grid.RowDefinitions>
<Image x:Name="image1" HorizontalAlignment="Left" Height="175" VerticalAlignment="Top" Width="207" Stretch="UniformToFill"/>
<Grid HorizontalAlignment="Left" Height="30" VerticalAlignment="Top" Width="112" Background="#FFC78D10">
<TextBox IsReadOnly="True" Height="30" TextWrapping="Wrap" Text="{Binding Path=Category}" Width="112" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="18" SelectionBrush="{x:Null}" HorizontalAlignment="Left" VerticalAlignment="Top" >
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
<TextBox IsReadOnly="True" HorizontalAlignment="Left" Height="28" Margin="0,42,0,0" TextWrapping="Wrap" Text="{Binding Path=Hour}" VerticalAlignment="Top" Width="148" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#FFE2E2E2" FontSize="22" SelectionBrush="{x:Null}" FontWeight="Bold">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<TextBox IsReadOnly="True" HorizontalAlignment="Left" Height="88" Margin="0,82,0,0" TextWrapping="Wrap" Text="{Binding Path=Title}" VerticalAlignment="Top" Width="207" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="20" SelectionBrush="{x:Null}" FontWeight="Bold">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
<TextBox IsReadOnly="True" x:Name="PlaceOfEvent" HorizontalAlignment="Left" Height="24" Margin="0,175,0,0" TextWrapping="Wrap" Text="{Binding Path=Where}" VerticalAlignment="Top" Width="207" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="White" FontSize="14" SelectionBrush="{x:Null}">
<TextBox.Template>
<ControlTemplate TargetType="{x:Type TextBox}">
<ScrollViewer Name="PART_ContentHost"/>
</ControlTemplate>
</TextBox.Template>
</TextBox>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.Template>
<ControlTemplate>
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
Each Tile is bound to an TileItem which means that the Bindings which point to e.g. Category, point to the Category of an TileItem.
To increase reusability it would be possible to move the code into its own usercontrol and optionally to add DependencyPropertys for better control.
Im trying to bind data from a XML file, ive followed tuts from mdsn and other online sources but i keep getting an error, if i bind the data to a listbox it works fine.
public void LoadPage()
{
XDocument loadedData = XDocument.Load("page01.xml");
var data = from query in loadedData.Descendants("page")
select new PageReader
{
PageNumber = (int)query.Element("pnumber"),
ChapterTitle = (string)query.Element("ctitle"),
ChapterNumber = (int)query.Element("cnumber")
};
LayoutRoot.DataContext = data;
}
and the XAML
Grid x:Name="LayoutRoot" Background="#FFFFFEFE">
<StackPanel>
<Grid>
<Rectangle Fill="#FF424242" HorizontalAlignment="Left" Height="60" Stroke="Black" VerticalAlignment="Top" Width="480"/>
<StackPanel Orientation="Horizontal">
<TextBlock Width="100" TextWrapping="Wrap" MaxWidth="100" MaxHeight="58" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFB6AEAE" FontFamily="{StaticResource lob2}" Text="{Binding ChapterNumber}"/>
<TextBlock Width="280" TextWrapping="Wrap" MaxWidth="300" MaxHeight="58" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFB6AEAE" FontFamily="{StaticResource lob2}" Text="{Binding ChapterTitle}"/>
<TextBlock Width="100" TextWrapping="Wrap" MaxWidth="100" MaxHeight="58" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFB6AEAE" FontFamily="{StaticResource lob2}" Text="{Binding PageNumber}"/>
</StackPanel>
</Grid>
<Grid Height="30"></Grid>
<TextBlock x:Name="PageText" Height="640" ScrollViewer.VerticalScrollBarVisibility="Visible"></TextBlock>
</StackPanel>
</Grid>
Your data is of type IEnumerable<PageReader>, which is why it would work with a ListBox as ListBox is expecting a collection.
If you change
LayoutRoot.DataContext = data;
to
LayoutRoot.DataContext = data.FirstOrDefault();
At least you should see some data show up on the UI.
I want to change the font colour of a number of items on a WPF page based on the theme selected by the user. (there is a light theme, and a dark theme)
I'm using a datatemplate to customise the content of a listbox, when the theme is Dark, I want to change all the textblock font colours to White.
My the class behind the page I'm setting 'DarkTheme' to true.
I've successfully set triggers below, however I can't figure out how to do this from a value set on the pages class.
So, how can I style the font colour of the textblocks to white if DarkTheme = true?
Code:
public partial class Media : UserControl
{
public bool DarkTheme { get; set; }
readonly DatabaseAsset _dbAssets = new DatabaseAsset();
public Media()
{
InitializeComponent();
RefreshMediaList();
DarkTheme = Global.Configuration.IsDarkModeAppliedAsTheme();
}
}
XAML:
<UserControl.Resources>
<db:MediaAsset x:Key="MediaAsset"/>
<DataTemplate x:Key="MediaAssetItemTemplate">
<ListBoxItem Height="70" Name="ListBoxItem">
<DockPanel Margin="0,0,0,0" Height="65">
<DockPanel DockPanel.Dock="Left" Name="VideoImage2" Height="65" Width="102">
<Button Name="ListBoxItemSelect" Click="ButtonBase_OnClick" Tag="{Binding Path=Id}">
<Path Name="test" Width="38" Height="30.0833" Canvas.Left="19" Canvas.Top="22.1667" Stretch="Fill" Fill="#FF000000" Data="F1 M 19,34.8333L 22.1667,34.8333L 22.1667,42.75L 19,42.75L 19,34.8333 Z M 22.9583,34.0417L 49.4791,34.0417L 49.4791,38L 50.6667,38L 57,31.6667L 57,52.25L 50.6667,45.9167L 49.4791,45.9167L 49.4791,52.25L 22.9583,52.25L 22.9583,34.0417 Z M 29.2917,22.1667C 32.3522,22.1667 34.8333,24.6478 34.8333,27.7083C 34.8333,30.7689 32.3522,33.25 29.2917,33.25C 26.2311,33.25 23.75,30.7689 23.75,27.7083C 23.75,24.6478 26.2311,22.1667 29.2917,22.1667 Z M 41.9583,22.1667C 45.0189,22.1667 47.5,24.6478 47.5,27.7083C 47.5,30.7689 45.0189,33.25 41.9583,33.25C 38.8977,33.25 36.4167,30.7689 36.4167,27.7083C 36.4167,24.6478 38.8977,22.1667 41.9583,22.1667 Z "/>
</Button>
</DockPanel>
<DockPanel Dock="Left" Name="VideoData2" HorizontalAlignment="Stretch" Height="65">
<TextBlock DockPanel.Dock="Top" Text="{Binding Path=Title}" FontWeight="Bold" FontSize="18"></TextBlock>
<TextBlock DockPanel.Dock="Top" TextTrimming="CharacterEllipsis" Text="{Binding Path=Description}" TextWrapping="NoWrap" FontSize="13" Margin="0,0,0,0"/>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<TextBlock Text="{Binding Path=VideoCatNane}" FontSize="12" FontStyle="Italic"/>
<Border Width="50"></Border>
<TextBlock Text="{Binding Path=MediaState}" FontSize="12"/>
</StackPanel>
</DockPanel>
</DockPanel>
</ListBoxItem>
</DataTemplate>
</UserControl.Resources>
That's not the right way to do theming in WPF.
But if you want a quick solution, Move the InitializeComponent() statement to the bottom of your constructor:
public Media()
{
RefreshMediaList();
DarkTheme = Global.Configuration.IsDarkModeAppliedAsTheme();
InitializeComponent(); // <-- Here
}
I'm trying to make a ListPicker control that contains a list of levels, with a colored square next to each level. This is what I've got:
<toolkit:ListPicker Grid.Row="1"
x:Name="LevelList"
Header="Level"
ItemCountThreshold="0"
FontFamily="Segoe WP Light">
<toolkit:ListPicker.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding}"
Width="43"
Height="43" />
<TextBlock Text="{Binding}"
Margin="12 0 0 0" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.ItemTemplate>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Margin="16 21 0 20">
<Rectangle Fill="{Binding}"
Width="43"
Height="43" />
<TextBlock Text="{Binding}"
Margin="16 0 0 0"
FontSize="43"
FontFamily="{StaticResource PhoneFontFamilyLight}" />
</StackPanel>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
and in the c# part, I have
String[] Level= { "E1", "E2", "E3", "E4", "E5"};
String[] colors = { "#FFE5AD1B", "#FF0050EF", "#FFE51400", "#FF008A00", "#FFAA00FF" };
public TolonPk()
{
InitializeComponent();
this.listaNivel.ItemsSource = Level;
this.listaNivel.ItemsSource = colors;
}
My problem is that I don't know how to bind the Textblock strictly to the Level String array and the rectangle fill to the colors...
I'm probably missing something simple, but I just can't seem to get it...
if toolkit:ListPicker uses its ItemsSource like other WPF ItemsControl subclasses, then you need to have both the Level string and the Color string in the same list.
Make a little struct/class that contains a string for level and a string for color.
public struct LevelAndColor
{
public String Level { get; set; }
public String Color { get; set; }
}
Create some IEnumerable (List, ObservableCollection, etc.) and populate it with your instances of level-color pairs.
In the binding, bind like so:
<StackPanel Orientation="Horizontal">
<Rectangle Fill="{Binding Color}" Width="43" Height="43"/>
<TextBlock Text="{Binding Level}" Margin="12 0 0 0"/>
</StackPanel>