C# WPF template slider with two textblocks (how to bind the textblock.text) - data-binding

I have added a Style to the ResourceDictionary. The ControlTemplate contains a Grid with one Slider and two TextBlocks.
My problem is that i dont know how i can bind the textblock text. Is there any easy way to do it?
This is the code, how i would like to use the template in my view.xaml
<Slider Style="{StaticResource ComboSliderTheme}"
Minimum="0"
Maximum="100"
*Textbox myTitle ="Time"
*Textbox myValue ="23"/>
And this is the code i have added to the resource dictionary so far.
How do i have to modify the Textblock text= to get the wished result?
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type Slider}"
x:Key="ComboSliderTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Height="50"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock *Text="My Title" (Value to Bind)
Grid.Column="0"
Grid.Row="0"
/>
<TextBlock *Text="My Value" (Value to Bind)
Grid.Column="1"
Grid.Row="0"
/>
<Slider Grid.Row="1"
Grid.ColumnSpan="2"
Minimum="{TemplateBinding Property=Minimum}"
Maximum="{TemplateBinding Property=Maximum}"
/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
</ResourceDictionary>
Thanks

Related

Binding to a property in ControlTemplate does not work

I have a mobile app with Xamarin.Forms and FreshMvvm. Every page uses a control template defined in App.xaml:
<ControlTemplate x:Key="MainPageTemplate">
<Grid BindingContext="{Binding Source={RelativeSource TemplatedParent}}">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="9*" />
</Grid.RowDefinitions>
<Image Source="{local:ImageResource MyApp.Images.My_logo.jpg}" Margin="0, 0, 0, 5" Grid.Row="0" />
<Label Text="{Binding ScreenName}" FontSize="Subtitle" TextColor="Black" FontAttributes="Bold" HorizontalOptions="Center" Grid.Row="1" />
<Label Text="{Binding ErrorMessage}" TextColor="Red" Grid.Row="2" />
<ContentPresenter Margin="10, 0, 10, 10" Grid.Row="3" />
</Grid>
</ControlTemplate>
The ScreenName property is defined in the PageModel like this:
protected string _screenName;
public string ScreenName => _screenName;
For some reason, the ScreenName is not showing up on the page that uses the control template. It does if I replace the Binding with a hard-coded text:
<Label Text="Something" ...
When setting your BindingContext to your {RelativeSource TemplatedParent}, your binding context is the page.
To access your ViewModel, you must change your xaml to access your property through the "BindingContext" of your page.
<Label Text="{Binding BindingContext.ScreenName}" FontSize="Subtitle" TextColor="Black" FontAttributes="Bold" HorizontalOptions="Center" Grid.Row="1" />

Can you define RowDefinition in style xamarin forms

I have the following
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"></RowDefinition>
<RowDefinition Height="7.5*"></RowDefinition>
</Grid.RowDefinitions>
and I would like to define the Height in a Style or in a variable in the app.xaml.
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource myHeight}"></RowDefinition>
<RowDefinition Height="{StaticResource myHeight2}"></RowDefinition>
</Grid.RowDefinitions>
Is this possible? I have tried but I get an error.
The reason I want to achieve this is that on small devices I need to change the row height.
I would appreciate any tips or suggestions.
You can bind a model to ContentPage , then Grid can use binded data by model and row height can be setted by model data (contain row height paramaters).
For example , create a sample ViewModel(RowHeightClass) as follow :
using Xamarin.Essentials;
public class RowHeightClass
{
public GridLength rowFirstHeight { set; get; }
public GridLength rowSecondHeight { set; get; }
public RowHeightClass()
{
// here can add code set by device screen
var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;
double screenheight = mainDisplayInfo.Height;
rowFirstHeight = new GridLength(DeviceDisplay * 0.2);
rowSecondHeight = new GridLength(DeviceDisplay * 0.4);
}
}
Binding it in ContentPage :
RowHeightClass rowHeightClass = new RowHeightClass();
BindingContext = rowHeightClass;
Used in XAML :
<Grid VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="{Binding rowFirstHeight}" />
<RowDefinition Height="{Binding rowSecondHeight}" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0"
Grid.Column="0"
BackgroundColor="Blue" />
<BoxView Grid.Row="1"
Grid.Column="0"
BackgroundColor="Red" />
<Button Grid.Row="2"
Grid.Column="0"
BackgroundColor="Yellow"
Clicked="Button_Clicked" />
</Grid>
Note : You can modify the constructor method of RowHeightClass to add method to set needed height by the size of device screen .
==================================Update=====================================
Using StaticResource also can set the heigh of row . Add a Resources for Grid or Application as follow :
<Grid VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Grid.Resources>
<ResourceDictionary>
<x:Double x:Key="SmallScreenRowheight">200</x:Double>
<x:Double x:Key="LargeScreenRowheight">400</x:Double>
</ResourceDictionary>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition Height="{StaticResource SmallScreenRowheight}" />
<RowDefinition Height="{StaticResource LargeScreenRowheight}" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0"
Grid.Column="0"
BackgroundColor="Blue" />
<BoxView Grid.Row="1"
Grid.Column="0"
BackgroundColor="Red" />
<Button Grid.Row="2"
Grid.Column="0"
BackgroundColor="Yellow"
Clicked="Button_Clicked" />
</Grid>

Styling a Listview with a gridview in it

I tried to style my listview template, which contains a gridview. I tried to do it using an ItemsPresenter and it works fine but my gridview's header disappears.
What should i use to preserve my header?
<Style TargetType="{x:Type ListView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border x:Name="Bd"
SnapsToDevicePixels="true">
<ScrollViewer Focusable="false">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Edit : My Listview
<ListView Name="findReplaceView" Margin="10" Grid.Row="1" Grid.Column="0"
HorizontalContentAlignment="Center" VerticalContentAlignment="Center"
SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
ItemsSource="{Binding FindAndReplaceItems}">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header="Find" DisplayMemberBinding="{Binding Find}"
Width="{Binding ElementName=helperField1, Path=ActualWidth}"/>
<GridViewColumn Header="Replace" DisplayMemberBinding="{Binding Replace}"
Width="{Binding ElementName=helperField2, Path=ActualWidth}"/>
</GridView>
</ListView.View>
</ListView>
It's because you didn't style the header part. This is how you should do it:
<Style TargetType="{x:Type ListView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid HorizontalAlignment="Left">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- This is how your headers are presented -->
<ItemsControl ItemsSource="{Binding RelativeSource={RelativeSource AncestorType=ListView},Path=View.Columns}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="LightGray" Background="MidnightBlue">
<TextBlock Foreground="WhiteSmoke"
TextAlignment="Center"
FontWeight="Bold"
Text="{Binding Header}"
Width="{Binding ActualWidth}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
<!-- This is how your items are presented -->
<Border x:Name="Bd" Grid.Row="1"
SnapsToDevicePixels="true">
<ScrollViewer Focusable="false">
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In the above code there are 2 Grid.RowDefinitions with height="Auto" and height="*" the first one is the area (i.e. the top row) that represents the header part and the second one is the remaining area that contains your ItemsPresenter and determines how your items are presented.
Edit
Since this is suppose to be a general style for a ListView that it's columns are already defined in some ListView.View, I thought using an ItemsControl for the headers part would make your style quite flexible. I modified my code sample accordingly in which the headers part is an ItemsControl with horizontal orientation that it's ItemsSource is bound to ListView.View.Columns. This way columns count in the style will depend on columns count in your ListView. Also the ItemsControl.ItemTemplate is a TextBlock that it's text is bound to the header of the respective column, therefore columns header in the style will be the same as columns headers in your ListView.

Windows Phone 8 - ASP.Net Master Page Equivalent

I'm new to Windows Phone 8 Development. I have developed ASP.NET websites before.
My pages (In WP8 Application) share the same headers and footers.
So what is the best method to implement a Master Page like in windows phone 8 ?
I've came across a few solutions that use Frame tag ; but they were not applicable.
Any help is highly appreciated.
PS: I'm using MVVM Light Toolkit
I came across this solution but it is a work around:
1- defining <ControlTemplatex:Key="Decorator" TargetType="ContentControl"> in App.xaml
2- in each page i want that template i just add <ContentControl Template="{StaticResource Decorator}">
Here is a little detailed sample:
App.xaml
<ControlTemplate x:Key="Decorator" TargetType="ContentControl">
<Grid x:Name="LayoutRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid x:Name="HeaderPanel" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="4*" />
</Grid.ColumnDefinitions>
<Button x:Name="BackBtn" Grid.Column="0" />
<TextBlock Grid.Column="1" Text="{Binding Title}" />
</Grid>
<ContentPresenter Grid.Row="1" />
<Grid x:Name="BottomPanel" Grid.Row="2" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Button Grid.Column="0" />
<Button Grid.Column="1" />
<Button Grid.Column="2" />
<Button Grid.Column="3" />
</Grid>
</Grid>
</ControlTemplate>
Now in any xaml page i want to embed that content template i just add the following:
<ContentControl Template="{StaticResource Decorator}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="5*" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Grid Title" />
<Grid x:Name="ContentGrid" Grid.Row="1">
</Grid>
</ContentControl>
Resource: http://www.codeproject.com/Articles/82464/How-to-Embed-Arbitrary-Content-in-a-WPF-Control

Silverlight Expander.Header with additional button

When the Complete Survey button on the Expander.Header is clicked, I would like to Navigate to another page and pass along some information from the viewmodel. I have the expander working so that when its selected it expands, and the selecteditem property is properly bound and filled. However if I just click right to the button, the selecteditem does not change and is not even populated if its the first action. How can I trigger the selected item if the button control is pressed before the expander is selected? I would prefer an MVVM solution if possible. Thanks
<ListBox x:Name="SearchList"
Grid.Row="1"
Margin="5,0,5,0"
Grid.Column="0"
Background="Transparent"
BorderThickness="0"
BorderBrush="Transparent"
ItemsSource="{Binding Path=SearchResults}"
SelectedItem="{Binding Path=SelectedResult,Mode=TwoWay,Converter={StaticResource DebugConverter}}"
HorizontalContentAlignment="Stretch"
HorizontalAlignment="Stretch">
<ListBox.ItemTemplate>
<DataTemplate>
<toolkit:Expander>
<sb:BindingHelper.Binding>
<sb:RelativeSourceBinding TargetProperty="IsExpanded"
Path="IsSelected"
RelativeMode="FindAncestor"
AncestorType="ListBoxItem" BindingMode="TwoWay" />
</sb:BindingHelper.Binding>
<toolkit:Expander.Header>
<Grid Width="525">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="25" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="{Binding Path=PatientName}" />
<Button Grid.Column="2"
Grid.Row="0"
Content="Complete Survey">
<sb:BindingHelper.Binding>
<sb:RelativeSourceBinding Path="OpenSurveyCommand"
TargetProperty="Command"
RelativeMode="ParentDataContext" />
</sb:BindingHelper.Binding>
</Button>
</Grid>
</toolkit:Expander.Header>
<StackPanel>
<TextBlock Text="{Binding MRN,Converter={StaticResource StringLabelConverter},ConverterParameter=MRN}" />
<TextBlock Text="{Binding OriginalVisitNumber,Converter={StaticResource StringLabelConverter},ConverterParameter='Original Visit Number'}" />
<TextBlock Text="{Binding OriginalAdmitDate,Converter={StaticResource StringLabelConverter},ConverterParameter='Original Admit Date'}" />
<TextBlock Text="{Binding OriginalReason,Converter={StaticResource StringLabelConverter},ConverterParameter='Original Reason'}" />
<TextBlock Text="{Binding ReAdmitVisitNumber,Converter={StaticResource StringLabelConverter},ConverterParameter='ReAdmit Visit Number'}" />
<TextBlock Text="{Binding ReAdmitDate,Converter={StaticResource StringLabelConverter},ConverterParameter='Readmit Date'}" />
<TextBlock Text="{Binding ReAdmitReason,Converter={StaticResource StringLabelConverter},ConverterParameter='ReAdmit Reason'}" />
</StackPanel>
</toolkit:Expander>
</DataTemplate>
</ListBox.ItemTemplate>
I'm not familiar with the BindingHelper class you're using but if it's using the standard commanding in the background then I'd bind the command parameter to the "item".
That way you have access to the bound item in the commands executed event.
Using a collection of viewmodels with the button in the viewmodel solved this. No special magic other than the ObservableCollectionVM

Resources