We Keep Coding

How to dynamically change the icon on a button based value in a list?

I have the following xaml code:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Check In"
Clicked="CheckInFile"/>
<MenuItem Text="Check Out"
Clicked="CheckOutFile"/>
<MenuItem Text="Download"
Clicked="DownloadFile"/>
<MenuItem Text="Upload Local Copy"
Clicked="UploadFile"/>
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="{Binding Path=DriveItem.Name}"
FontSize="Small" />
<Label Grid.Column="1""
FontFamily="Segoe MDL2 Assets"
Text="{Binding PublicationStatus}"
/>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
and the related cs code:
protected override async void OnAppearing()
{
var directoryContents = await App.GraphClient.Sites[siteID].Lists[sharedDocsDriveId]
.Items
.Request()
//.Expand(item => item.DriveItem)
.Expand("driveItem($select=publication,name,id,description,file,webUrl)")
.GetAsync();
SharedDocumentList.ItemsSource = directoryContents.CurrentPage.ToList();
}
For each item that is returned, it contains info about the file - if it's presently checked out or not. the field is "Level" as you can see below/
directoryContents.CurrentPage[i].DriveItem.Publication
{Microsoft.Graph.PublicationFacet}
AdditionalData: null
Level: "checkout"
ODataType: null
VersionId: "4.0"
If the value of Level is "checkout" I want to show the locked icon using this:
https://learn.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font
but if it's "published" I'd like to use the unlock icon for example.
Is there a simple way to do some sort of IF statement within the XAML to evaluate the value of DriveItem.Publication.Level and then display the appropriate icon? I started to go down the route of exposing a new property in my codebehind called publicationStatus but ... maybe that's overkill. I feel like there's a simpler way I'm not thinking of?
EDIT 1
So I've updated the xaml to use the datatrigger method but I'm getting the error that the property "RelativeSource" was not found in type BindingExtension.
<ListView x:Name="SharedDocumentList"
HasUnevenRows="true"
>
<ListView.Resources>
<Style x:Key="PublicationStatus" TargetType="Label">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}"
Value="checkout">
<Setter Property="Text" Value="\uE701"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Tag, RelativeSource={RelativeSource Self}}"
Value="published">
<Setter Property="Text" Value="\uE702"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Check In"
Clicked="CheckInFile"/>
<MenuItem Text="Check Out"
Clicked="CheckOutFile"/>
<MenuItem Text="Download"
Clicked="DownloadFile"/>
<MenuItem Text="Upload Local Copy"
Clicked="UploadFile"/>
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="{Binding Path=DriveItem.Name}"
FontSize="Small" />
<Label Grid.Column="1"
Style="{StaticResource PublicationStatus}"
Tag="{Binding PublicationStatus}" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
EDIT 2
This is my attempt at using the ValueConverter.
Here's what the code behind for the class looks like in part:
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class SPDocumentLibraryContentsPage : ContentPage
{
public string IconValue { get; set; }
public SPDocumentLibraryContentsPage()
{
InitializeComponent();
IconValue = "checkout";
//this.DataContext doesn't exist.
}
The ListView on the Xaml page looks like this:
<ListView.ItemTemplate>
<ViewCell.ContextActions>
</ViewCell.ContextActions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text="{Binding Path=DriveItem.Name}"
FontSize="Small" />
<Label x:Name="testBlock" Grid.Column="2"
Text="{Binding IconValue,Converter={StaticResource IconValueConverter}}" FontFamily="Segoe MDL2 Assets" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
And I was able to create the IconConverter class no problems.
Here's just a snippet:
namespace GraphTutorial.Models
{
public class IconValueConverter : Xamarin.Forms.IValueConverter
{
}
EDIT 3
To get the answer to work I did the following:
<Label Grid.Column="0" Text="{Binding Path=DriveItem.Name}" FontSize="Small" />
<Label Grid.Column="1" Text="{Binding Path=DriveItem.Publication.Level,Converter={StaticResource IconValueConverter}}" FontFamily="Segoe MDL2 Assets" />

It looks like that your app is a Xamarin UWP app, not a native UWP app.
You could also try to use a ValueConverter when using binding. What you need to do is create a ValueConverter class and make your own logic for converting different strings to different icons in the ValueConverter.
After that, you just need to use the ValueConverter as a parameter in the binding.
Here is a sample code that I've tested in a native UWP app. And it should work in the Xamarin UWP app. You need to replace Textblock with Label.
Code-behind:
public class IconValueConverter: IValueConverter
{
public object Convert(object value, Type targetType, object parameter, string language)
{
string OutputValue ;
string textvalue = value as string;
if (textvalue.Equals("checkout"))
{
OutputValue = "\uE701";
}
else if (textvalue.Equals("published"))
{
OutputValue = "\uE702";
}
else
{
OutputValue = "\uE703";
}
return OutputValue;
}
public object ConvertBack(object value, Type targetType, object parameter, string language)
{
throw new NotImplementedException();
}
}
MainPage:
public string IconValue { get; set;}
public MainPage()
{
this.InitializeComponent();
IconValue = "checkout";
this.BindingContext = this;
}
Xaml code:
<Page.Resources>
<local:IconValueConverter x:Key="IconValueConverter"/>
</Page.Resources>
<Grid>
<TextBlock x:Name="MyTextBlcok" Text="{Binding IconValue,Converter={StaticResource IconValueConverter}}" FontFamily="Segoe MDL2 Assets" />
</Grid>

There's a smart way to achieve this through a Trigger and a Tag property to avoid using IValueConverter or gaining access to parent DataContext from inside a Style.
Inside a list view or a root element
<ListView.Resources>
<Style x:Key="PublicationStatus" TargetType="Label">
<Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
<Style.Triggers>
<Trigger Property="Tag"
Value="checkout">
<Setter Property="Text" Value="\uE701"/>
</Trigger>
<Trigger Property="Tag"
Value="published">
<Setter Property="Text" Value="\uE702"/>
</Trigger>
</Style.Triggers>
</Style>
</ListView.Resources>
Then in code:
<Label Grid.Column="1"
Style="{StaticResource PublicationStatus}"
Tag="{Binding PublicationStatus}" />
You may also reuse a style and put it into some ResourceDictionary.
Warning. Not tested.

How to color text in a multiline based control

Environment: WPF, C#
What do I want?:
I'd like to display a message log in which the different type of messages (info, warning, error) are shown with a different style.
What's the problem?:
Based on the architecture I have given I need to do this with bindings. Currently there is a collection with LogMessages which contain a MessageType (enum). This collection is what I can use to create my binding.
In countless examples I've seen solutions using Run or direct access onto a Rich Text Control. I can't do that.
So is there a way to create this effect using bindings and the WPF given controls? Maybe using Converter? Preferably in a way which allows to just select the text like you do with a regular textbox.
Grateful for any advice
Thanks,
Vader
Solution
Even though I wished to implement a kind of overall textbox in which the user could select the different messages just like how you would in a browser, I ended up doing it with a style trigger just like Dairon below suggested.
I'll now make it so that the user can select multiple messages and copy those as string into the cache.
<ListBox ItemsSource="{Binding Messages}" BorderBrush="Black"
HorizontalAlignment="Stretch" Margin="10,70,10,0" Height="107" VerticalAlignment="Top">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Margin="4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Time}" FontWeight="DemiBold" />
<TextBlock Grid.Column="1" Text="{Binding Message}">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=MsgType}" Value="Info">
<Setter Property="Foreground" Value="DarkGray" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=MsgType}" Value="Warning">
<Setter Property="Foreground" Value="DarkOrange" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=MsgType}" Value="Error">
<Setter Property="Foreground" Value="DarkRed" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

I have used the example here, by Federico Berasategui. The example is perfect, you should start from here. And to handle different colors I changed his code to this :
LogEntry class :
public class LogEntry
{
public LogEntry(DateTime dateTime, int index, string message, Color textColor)
{
DateTime = dateTime;
Index = index;
Message = message;
TextColor = new SolidColorBrush(textColor);
TextColor.Freeze();
}
public DateTime DateTime { get; set; }
public int Index { get; set; }
public string Message { get; set; }
public SolidColorBrush TextColor { get; set; }
}
XAML part for LogEntry display :
<DataTemplate DataType="{x:Type local:LogEntry}">
<Grid IsSharedSizeScope="True">
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="Index" Width="Auto"/>
<ColumnDefinition SharedSizeGroup="Date" Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding DateTime}" Grid.Column="0"
FontWeight="Bold" Margin="5,0,5,0"/>
<TextBlock Text="{Binding Index}" Grid.Column="1"
FontWeight="Bold" Margin="0,0,2,0" />
<TextBlock Text="{Binding Message}" Grid.Column="2"
TextWrapping="Wrap" Foreground="{Binding TextColor}"/>
</Grid>
</DataTemplate>
I just added a TextColor property to the LogEntry class and bound it to the Foreground property of the TextBlock.
Feel free to delete CollapsibleLogEntry parts from the example if you don't need multi-level logs. And of course you can delete DateTime and Index if you just want to handle text messages in your log. You could add your Enum too if you want a MessageType.
The example is rather complete, but you can make very simple if you don't want all the "extras".

How to navigate to specifically position on ListBox Windows Phone 8.1

i have a listbox with a lot of items, and each items when clicked go to a new page, what i want is when i return from the second page, stay at the same position of the item is clicked!
Thats my list!
<ListBox x:Name="list" Loaded="ListView_Loaded" SelectedItem="true" SelectionChanged="searchResultsList_SelectionChanged" ItemsSource="{Binding}" Background="{x:Null}">
<!--<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Margin" Value="0,0,0,15" />
</Style>
</ListView.ItemContainerStyle>-->
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="10" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Width="80" Height="80">
<Image Source="{Binding Caminho}" />
</Border>
<StackPanel Margin="0,16,0,0" Grid.Column="2">
<TextBlock Foreground="White" Text="{Binding NomeCurso}" TextWrapping="Wrap" FontSize="{StaticResource TextStyleExtraLargeFontSize}" />
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
thanks!

If you are using WinRT you can write the following code in your page constructor to cache it, this way the positions will be intact after you go back to this page:
this.NavigationCacheMode = NavigationCacheMode.Required;
And from your sample I cant really see if you are using ListBox or ListView, I will presume ListView which is better as the ListBox is somewhat not needed anymore.
One thing I also noticed is that you use a simple {Binding} for your ItemsSource so maybe it is reset every time you go back because of this (if you are doing something that does this, as this is not visible from your sample code). I always have an additional property of type ObservableCollection and bind to it for example ItemsSource={Binding MyItems}. This way the list is reset only when I reset the property MyItems.

Adding different elements based on button clicked

I have two different panels like this
.
When i click on the first button, it should display some text, second button should display a datagrid and so on.
How do i change the elements of the right hand panel to achieve this. Initially i just used different windows. Is there a way to call them into the panel ? Then I though of hiding elements based on the button clicked, but that would look like a mess. Should i code the elements when a button is clicked otherwise ? How is this functionality usually added ? What concepts do i need to learn to implement this ?

After coming across this question and seeing the absolutely poor answers that you had been provided with, I felt obliged to offer you a decent answer. There are many different ways of achieving your requirements. Here is probably, the simplest method:
Declare one Grid in MainWindow that displays your three Buttons on the left hand side and the three possible controls on the right hand side:
<Grid>
<Grid.Resources>
<Style x:Key="ButtonStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Width" Value="150" />
<Setter Property="Height" Value="40" />
<Setter Property="Content" Value="Button" />
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<ToggleButton Grid.Row="0" Name="Button1" Style="{StaticResource ButtonStyle}" />
<ToggleButton Grid.Row="1" Name="Button2" Style="{StaticResource ButtonStyle}" />
<ToggleButton Grid.Row="2" Name="Button3" Style="{StaticResource ButtonStyle}" />
<TextBlock Grid.Column="1" Grid.Row="0" Name="TextBlock" Text="Here is some text"
HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{Binding
IsChecked, ElementName=Button1, Converter={StaticResource
BooleanToVisibilityConverter}}" />
<Rectangle Grid.Column="1" Grid.Row="1" Name="Rectangle" Width="150" Height="40"
Fill="LightGreen" Stroke="Black" Visibility="{Binding IsChecked, ElementName=
Button2, Converter={StaticResource BooleanToVisibilityConverter}}" />
<RadioButton Grid.Column="1" Grid.Row="2" Name="RadioButton" Content="Here is an
option" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="{
Binding IsChecked, ElementName=Button3, Converter={StaticResource
BooleanToVisibilityConverter}}" />
</Grid>
Note that I used ToggleButtons here simply because they have a bool IsChecked property that is set when they are clicked on and can be used to show and hide the controls on the right hand side. To do this, we use a BooleanToVisibilityConverter (which was introduced into the .NET Framework in .NET 4.5) to convert our bool ToggleButton.IsChecked property values into Visibility values.
Now this example probably wasn't exactly what you were thinking of, but I'm sure that it will give you enough of an example for you to experiment with and come up with your desired UI... remember that you are going to have to do some work too.

Create your Xaml page with all the views Textboxt, DataGrid and TextBox2. then you just need to play with the Visibility of controls

Actually using the Tile Control in MahApps Metro?

I have been working with MahApps Metro UI for couple days now and i have realy enjoyed it. WHen looking through their documentation, i wanted to use the tile control and make something along the lines of this:
Their documentation, located on this page: http://mahapps.com/controls/tile.html , only tells me this:
The following XAML will initialize a Tile control with its Title set to "Hello!" and its Count set to 1.
<controls:Tile Title="Hello!"
TiltFactor="2"
Width="100" Height="100"
Count="1">
</controls:Tile>
When i entered this into my simple application, i get one small rectangle. How am i actually supposed to use the control to mimic the Windows 8 start screen with tiles?

I'm currently building a large application using the MahApps Metro library and it's amazing! In terms of getting an app to look like the Windows 8 start screen, heres quick example I whipped up.
XAML
<Window x:Class="Win8StartScreen.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Title="MainWindow" Height="513" Width="1138" WindowState="Maximized" WindowStyle="None" Background="#191970">
<Window.Resources>
<Style x:Key="LargeTileStyle" TargetType="mah:Tile">
<Setter Property="Width" Value="300" />
<Setter Property="Height" Value="125" />
<Setter Property="TitleFontSize" Value="10" />
</Style>
<Style x:Key="SmallTileStyle" TargetType="mah:Tile">
<Setter Property="Width" Value="147" />
<Setter Property="Height" Value="125" />
<Setter Property="TitleFontSize" Value="10" />
</Style>
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="87*"/>
<ColumnDefinition Width="430*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="83*"/>
<RowDefinition Height="259*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="1"
VerticalAlignment="Center"
Text="Start"
FontWeight="Light"
Foreground="White"
FontSize="30"
FontFamily="Segoe UI" />
<WrapPanel Grid.Row="1" Grid.Column="1" Width="940" Height="382" HorizontalAlignment="Left" VerticalAlignment="Top">
<mah:Tile Title="Mail" Style="{StaticResource LargeTileStyle}" Content="ImageHere" Background="Teal" Margin="3"/>
<mah:Tile Title="Desktop" Style="{StaticResource LargeTileStyle}" Margin="3">
<mah:Tile.Background>
<ImageBrush ImageSource="Images/windesktop.jpg" />
</mah:Tile.Background>
</mah:Tile>
<mah:Tile Title="Finance" Style="{StaticResource LargeTileStyle}" Background="Green" />
<mah:Tile Title="People" Style="{StaticResource LargeTileStyle}" Background="#D2691E" />
<mah:Tile Title="Weather" Style="{StaticResource LargeTileStyle}" Background="#1E90FF" />
<mah:Tile Title="Weather" Style="{StaticResource SmallTileStyle}" Background="#1E90FF" />
<mah:Tile Title="Store" Style="{StaticResource SmallTileStyle}" Background="Green" />
</WrapPanel>
</Grid>
</Window>
There are lots of ways to do this to make it cleaner and more reusable using styles and templates, but this was just a quick way to show the use of the Tiles control.