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.
Related
In most desktop apps, if you're waiting for something, the mouse cursor will change to a wait cursor. Obviously, phones are a bit different. But, in UWP land, we'd like the mouse cursor to change to a wait cursor while async operations are occurring.
Is there a way to do this in standard Xamarin Forms? Or, with a 3rd party library?
The hope would be that on phones, there would be some other visual indicator that something is occurring. I.e. keyboard colour changes or something similar.
If not, I'm guessing I'll have to implement some dependency injected code for each platform. Any tips?
Not an answer to your UWP question, but this is how you can handle things on phone:
You could add a Grid over the whole page and make it grey and half transparent so the rest of your page gets "greyed out". Then add an ActivityIndicator to the middle of the Grid to indicate something is loading. Set IsVisible of the Grid to a bool value that indicates that something is loading/happening.
This is what I got on one of my pages:
<Grid BackgroundColor="##60000000"
IsVisible="{Binding IsLoading}">
<Grid VerticalOptions="CenterAndExpand">
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".5*" />
<ColumnDefinition Width="9*" />
<ColumnDefinition Width=".5*" />
</Grid.ColumnDefinitions>
<Frame Grid.Column="1"
HorizontalOptions="Center"
VerticalOptions="Center"
Padding="0"
HasShadow="True"
OutlineColor="#e6e6e6">
<Grid BackgroundColor="White"
RowSpacing="0"
ColumnSpacing="0">
<StackLayout>
<ActivityIndicator IsRunning="true"
Margin="10"
HorizontalOptions="Center"
VerticalOptions="Center" />
<Label Text="{i18n:Translate Text=loading_contacts}"
Margin="20,0,20,10"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</StackLayout>
</Grid>
</Frame>
</Grid>
</Grid>
Mine is a similar answer to Dennis, with a bit more re-use.
I created a control template in App.xaml
<ControlTemplate x:Key="ActivityIndicatorTemplate">
<Grid>
<ContentPresenter />
<StackLayout Style="{StaticResource BlockingPanel}"
IsVisible="{TemplateBinding BindingContext.IsBusy}">
<ActivityIndicator Style="{StaticResource ActivityIndicatorStyle}"
IsVisible="{TemplateBinding BindingContext.IsBusy}"
IsRunning="{TemplateBinding BindingContext.IsBusy}" />
</StackLayout>
</Grid>
</ControlTemplate>
Here are the styles
<Style x:Key="BlockingPanel" TargetType="StackLayout">
<Setter Property="BackgroundColor" Value="{StaticResource BlockingColor}" />
<Setter Property="HorizontalOptions" Value="FillAndExpand" />
<Setter Property="VerticalOptions" Value="FillAndExpand" />
</Style>
<Style x:Key="ActivityIndicatorStyle" TargetType="ActivityIndicator">
<Setter Property="Color" Value="White" />
<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
<Setter Property="VerticalOptions" Value="CenterAndExpand" />
</Style>
<Color x:Key="BlockingColor">
<x:Arguments>
<x:Double>0</x:Double>
<x:Double>0</x:Double>
<x:Double>0</x:Double>
<x:Double>0.75</x:Double>
</x:Arguments>
</Color>
Then you can use it on any page like this
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Incident.Pages.LoginPage"
ControlTemplate="{StaticResource ActivityIndicatorTemplate}"
Title="Login">
...
</ContentPage>
Background
I'm creating a set of custom activities that perform simple actions that aren't found in UiPath's core activity set. I'm planning on extending these activities to include some of my own image processing and Machine Learning algorithms.
Currently I'm starting out small and have created a NativeActivity that strips a MailMessage of its attachments. The problem is that in UiPath it looks like this:
Problem
I want to circulate this activity, so I really need to have it look much better than this! I have tried looking at sites that do WorkFlow Foundation activity designs, but each time I successfully compile, package and install my project it looks the same as above. I would like my activity to reflect the xaml design below:
<sap:ActivityDesigner x:Class="LarcAI.MailActivityDesigner.MailActivity"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:System;assembly=mscorlib"
xmlns:sap="clr-namespace:System.Activities.Presentation;assembly=System.Activities.Presentation"
xmlns:sapv="clr-namespace:System.Activities.Presentation.View;assembly=System.Activities.Presentation"
xmlns:sapc="clr-namespace:System.Activities.Presentation.Converters;assembly=System.Activities.Presentation"
xmlns:Model="clr-namespace:System.Activities.Presentation.Model;assembly=System.Activities.Presentation"
xmlns:MailActivityLibrary="clr-namespace:LarcAI.MailActivity;assembly=MailActivityLibrary">
<sap:ActivityDesigner.Resources>
<ResourceDictionary x:Uid="ResourceDictionary_1">
<sapc:ArgumentToExpressionConverter x:Key="ArgumentToExpressionConverter" />
<sapc:ModelToObjectValueConverter x:Key="ModelToObjectValueConverter" />
<DataTemplate x:Key="Collapsed">
<StackPanel Orientation="Horizontal">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="0" Margin="5" Text="Mail" />
<sapv:ExpressionTextBox HintText="Enter a VB Expression" Expression="{Binding Path=ModelItem.Text, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In }" ExpressionType="s:String" Grid.Row="0" Grid.Column="1" OwnerActivity="{Binding Path=ModelItem}" Width="300" Margin="0,5" MaxLines="1" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="Expanded">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Grid.Row="0" Grid.Column="0" Margin="5" Text="Mail" />
<sapv:ExpressionTextBox HintText="Enter a VB Expression" Expression="{Binding Path=ModelItem.Text, Mode=TwoWay, Converter={StaticResource ArgumentToExpressionConverter}, ConverterParameter=In }" ExpressionType="s:String" Grid.Row="0" Grid.Column="1" OwnerActivity="{Binding Path=ModelItem}" Width="300" Margin="0,5" MaxLines="1" />
</Grid>
</DataTemplate>
<Style x:Key="ExpandOrCollapsedStyle" TargetType="{x:Type ContentPresenter}">
<Setter Property="ContentTemplate" Value="{DynamicResource Expanded}" />
<Style.Triggers>
<DataTrigger Binding="{Binding Path=ShowExpanded}" Value="false">
<Setter Property="ContentTemplate" Value="{DynamicResource Collapsed}" />
</DataTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
</sap:ActivityDesigner.Resources>
<sap:ActivityDesigner.Icon>
<DrawingBrush>
<DrawingBrush.Drawing>
<ImageDrawing>
<ImageDrawing.Rect>
<Rect Location="0,0" Size="25,25" ></Rect>
</ImageDrawing.Rect>
<ImageDrawing.ImageSource>
<BitmapImage UriSource="Images/remove_attachment.png" />
</ImageDrawing.ImageSource>
</ImageDrawing>
</DrawingBrush.Drawing>
</DrawingBrush>
</sap:ActivityDesigner.Icon>
<Grid>
<ContentPresenter Style="{DynamicResource ExpandOrCollapsedStyle}" Content="{Binding}" />
</Grid>
Help
If someone can please explain how to link a xaml file to my NativeActivities, preferably in a step-wise solution, that would be great!
I found out something that might be helpful to you.
I wanted to create a variation of the log activity. If I copy the properties from the UiPath "Log Message" activity, and then add their LogDesigner class as attribute to my class, then I get the same look and feel of my custom activity as UiPath has on their native version.
[Designer(typeof(UiPath.Core.Activities.Design.LogDesigner))]
public class LogMessage : CodeActivity, IRegisterMetadata
{
[Category("Input")]
public UiPath.Core.Activities.CurentLogLevel Level { get; set; }
[Category("Input")]
public InArgument<System.String> Message { get; set; }
[Category("Input")]
public InArgument<System.String> LogFilePath { get; set; }
So my activity now looks like this in UiPath Studio:
I highlighted a new property I added to the activity (to show it's not the original).
I know it does not answer your question on how to link custom xaml to your activity, but maybe this information could be helpful as to avoid the default look of custom activities.
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
I am working on WPF using c#. I am trying to display WPF Area chart with values using WPF Toolkit.
I have followed the CodeProject's KB Article and write it like,
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:DV="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WpfChart.MainWindow"
Title="MainWindow" Height="621.053" Width="873.684">
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto" Margin="0,-28,0,28">
<Grid Height="921">
<DVC:Chart x:Name="areaChart" Title="Chart Title"
VerticalAlignment="Top" Margin="33,73,24,0" Height="582" Background="White" >
<DVC:AreaSeries DependentValuePath="Value"
IndependentValuePath="Key" ItemsSource="{Binding}"
IsSelectionEnabled="True" Title="Weeks of Gestation"></DVC:AreaSeries>
<DVC:Chart.Palette>
<DV:ResourceDictionaryCollection>
<ResourceDictionary>
<Style x:Key="DataPointStyle" TargetType="Control">
<Setter Property="Background" Value="Firebrick" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
</ResourceDictionary>
</DV:ResourceDictionaryCollection>
</DVC:Chart.Palette>
<DVC:Chart.Axes>
<!-- Add Horizontal and Vertical Axes-->
<DVC:LinearAxis ShowGridLines="True"
Orientation="Y"
Title="Y Axis Title"
Interval="5" Maximum="45" Minimum="-5"
Foreground="Black"
FontFamily="Arial Black"
FontSize="16"
FontWeight="Bold"
/>
<DVC:LinearAxis ShowGridLines="True"
Orientation="X"
Title="X-Axis Title"
Interval="4" Minimum="0" Maximum="40"
Foreground="Black"
FontFamily="Arial Black"
FontSize="16"
FontWeight="Bold"
/>
</DVC:Chart.Axes>
</DVC:Chart>
</Grid>
</ScrollViewer>
</Window>
and i write code for initialization chart data like,
private void LoadAreaChartData()
{
((AreaSeries)areaChart.Series[0]).ItemsSource =
new KeyValuePair<string, int>[]{
new KeyValuePair<string, int>("3", 5)
};
}
But it does not map the points on to the chart. I need to map the point on to the chart like,
(X,Y)--(3,5) its need to mark at the intersection of point 3 on x-axis and point 5 on y-axis. How can i achieve this please guide me if i went in the wrong way. Thanks in advance.
I'm attempting to create a simple button template in which the button normally looks like a single horizontal line, but when moused over, the button will display a "rectangle" color fill behind it. This is the code I have, but I can't seem to get the triggers to fire.
<Window x:Class="TestStylingWPF.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="36" GlassFrameThickness="0 0 0 1" ResizeBorderThickness="5" />
</WindowChrome.WindowChrome>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="36" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Height="36" Width="36"
HorizontalAlignment="Center" VerticalAlignment="Center"
Grid.Row="0">
<Button.Template>
<ControlTemplate>
<Grid>
<Rectangle x:Name="PART_ButtonBackgroundRectangle" Fill="LightGray" Width="36" Height="36" Opacity="0" />
<Path x:Name="PART_ButtonPath" Data="M10,26 L26,26" Stroke="DarkGray" StrokeThickness="1.5" />
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="PART_ButtonBackgroundRectangle" Property="IsMouseOver" Value="True">
<Setter TargetName="PART_ButtonBackgroundRectangle" Property="Opacity" Value="1" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</Window>
Does anyone know why my trigger won't work, or perhaps a better way to do this? I'm sort of new to WPF and would like to refactor this out (so as to use it in many buttons), but am unsure how.
Update: Ok, so I guess it appears to be because the button is within the caption bar of the window. Is there a good way around this? Maybe a way to set click/hover priority to the button?
You need to set Hittest visible of your button, such as:
shell:WindowChrome.IsHitTestVisibleInChrome="True"