I try to create a ContentPage, where i can do an article presentation with rotation (just multiple images), comparable to this solution: http://www.360-javascriptviewer.com/index.html. When the user does a Pan Gesture the image needs to be exchanged.
View:
<ContentPage.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Image Source="{Binding SelectedArticleImage.ImageSource}"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<Image.GestureRecognizers>
<PanGestureRecognizer PanUpdated="OnPanUpdated"/>
</Image.GestureRecognizers>
</Image>
<Label Text="A simple Label for test purposes"/>
</StackLayout>
</ContentPage.Content>
Viewmodel/Model:
public partial class RotationPage : ContentPage
{
public RotationPage()
{
InitializeComponent();
BindingContext = App.Locator.Rotation;
}
public void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
App.Locator.Rotation.OnPanUpdated(sender, e);
}
}
public class RotationViewModel : ViewModelBase
{
private double panValueBeginning;
private double panValueRunning;
private double screenWidthFactor = 100;
private List<ArticleImage> articleImages;
private ArticleImage selectedArticleImage;
public ArticleImage SelectedArticleImage
{
get
{
return (selectedArticleImage == null ? articleImages.FirstOrDefault() : selectedArticleImage);
}
set
{
Set(() => SelectedArticleImage, ref selectedArticleImage, value);
}
}
public RotationViewModel()
{
articleImages = new List<ArticleImage>();
LoadImageList();
}
private void LoadImageList()
{
for (int i = 0; i < 64; i++)
{
string name = "_" + (i + 1).ToString("D2") + ".jpg";
articleImages.Add(new ArticleImage(name));
}
}
public void OnPanUpdated(object sender, PanUpdatedEventArgs e)
{
Debug.WriteLine(e.StatusType.ToString() + ": " + e.TotalX);
switch (e.StatusType)
{
case GestureStatus.Started:
panValueRunning = 0;
break;
case GestureStatus.Running:
panValueRunning = e.TotalX;
SelectImage(e.StatusType, e.TotalX);
break;
case GestureStatus.Completed:
panValueBeginning = panValueRunning;
SelectImage(e.StatusType, e.TotalX);
break;
case GestureStatus.Canceled:
panValueBeginning = 0;
break;
}
}
private void SelectImage(GestureStatus status, double totalX)
{
double panValueRelative = (panValueBeginning + panValueRunning) % screenWidthFactor;
double panValueAbsolute = (panValueRelative < 0 ? screenWidthFactor : 0) + panValueRelative;
int index = Convert.ToInt32(Math.Max(1, Math.Min((panValueAbsolute / screenWidthFactor) * articleImages.Count, articleImages.Count))) - 1;
SelectedArticleImage = articleImages[index];
}
}
public class ArticleImage
{
public string Path { get; }
public ImageSource ImageSource { get; set; }
public ArticleImage(string path)
{
Path = path;
ImageSource.FromFile(path);
}
}
I hope you understand what i tried to do: OnPanUpdated loads a new Image from the Filesystem, depending on how far the user panned. On UWP Platform it is working, but far away from running... very laggy and no "realtime" rotation.
On Android I get an out of memory exception after 2 successful pans.
Is my approach generally wrong? How could I handle the image changing?
Thanks for any answers!
It sort of looks like you are trying to emulate what a CarouselView does. You may want to take a look at using this control which will allow you to swipe between images. It also is virtualized, so you will likely not run into those memory issues.
There is a post on the Xamarin blog to help get started, here.
This package is available on NuGet and is currently a pre-release version, so make sure you are searching with Include PreRelease Packages checked in Visual Studio.
Sample from blog post:
Since the CarouselView is in a separate assembly, we must bring in the CarouselView’s namespace in root of our page:
xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
Then, add the control to your page content:
<cv:CarouselView ItemsSource="{Binding Images}" x:Name="CarouselImages">
<cv:CarouselView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding Url}"/>
</Grid>
</DataTemplate>
</cv:CarouselView.ItemTemplate>
</cv:CarouselView>
If you are building applications for Windows, a DataTemplate needs to be added to the Application Resources in the App.xaml of the application.
First add a new namespace in the root node:
xmlns:uwp="using:Xamarin.Forms.Platform"
Then add the following to the Application.Resources node:
<DataTemplate x:Key="ItemTemplate">
<uwp:ItemControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</DataTemplate>
It should look something like this:
<Application
x:Class="MyApp.UWP.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:uwp="using:Xamarin.Forms.Platform"
xmlns:local="using:MyApp.UWP"
RequestedTheme="Light">
<Application.Resources>
<DataTemplate x:Key="ItemTemplate">
<uwp:ItemControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
</DataTemplate>
</Application.Resources>
</Application>
Linker Considerations
To ensure that the CarouselView does not get “Linked-out” when compiling in release mode ensure that you are using Compiled XAML by adding the following code into the project’s AssemblyInfo.cs where your XAMLexists:
using Xamarin.Forms.Xaml;
[assembly: XamlCompilation(XamlCompilationOptions.Compile)]
Or add the following code after the Forms.Init(); call in each project:
var cv = typeof (Xamarin.Forms.CarouselView);
var assembly = Assembly.Load(cv.FullName);
Additional Resources:
Forms Documentation
Source code for sample
Related
I have created custom tab control using ScrollView control and Bindable StackLayout control.
I have first created this solution in Xamarin.Forms (VS for Mac 2019) and it works fine in both platforms, but the same solution when developed in .Net MAUI (VS for Mac 2022 Prev) it's not working properly in Android.
Update 30 Jun 2022
There is an issue with BindableLayout (StackLayout) properties in MAUI currently so when we are changing values it does not get reflected, and because of this, I think I'm facing this issue. Here is the reference
Here is what I have done so far:
MainPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:vm="clr-namespace:poc_maui.ViewModels"
x:Class="poc_maui.Views.HomePage"
xmlns:tabs="clr-namespace:poc_maui.Views.SubViews"
Title="HomePage">
<ContentPage.BindingContext>
<vm:MainPageViewModel />
</ContentPage.BindingContext>
<Grid RowDefinitions="50, *" RowSpacing="0">
<ScrollView Grid.Row="0" Orientation="Horizontal" VerticalOptions="Start" HorizontalScrollBarVisibility="Never"
Scrolled="ScrollView_Scrolled">
<StackLayout x:Name="TabsView"
Orientation="Horizontal"
BindableLayout.ItemsSource="{Binding Tabs}" Spacing="0">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Grid RowDefinitions="*, 4" RowSpacing="0">
<Label Grid.Row="0"
Text="{Binding TabTitle}"
TextColor="White"
BackgroundColor="navy"
Padding="20,0"
VerticalTextAlignment="Center"
HorizontalTextAlignment="Center"
FontSize="12"
HeightRequest="40"/>
<BoxView Grid.Row="1"
Color="Yellow"
IsVisible="{Binding IsSelected}"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Path=BindingContext.TabChangedCommand,
Source={x:Reference TabsView}}"
CommandParameter="{Binding .}"/>
</Grid.GestureRecognizers>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
<tabs:ParentRecordTabView Grid.Row="1" IsVisible="{Binding IsParentRecordTabVisible}"
VerticalOptions="FillAndExpand"/>
<tabs:AdditionalInfoTabView Grid.Row="1" IsVisible="{Binding IsAdditionalInfoTabVisible}"
VerticalOptions="FillAndExpand" />
</Grid>
</ContentPage>
MainPageViewModel
using System;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Windows.Input;
using poc_maui.Models;
namespace poc_maui.ViewModels
{
public class MainPageViewModel : BaseViewModel
{
#region Constructor
public MainPageViewModel()
{
GetTabs();
}
#endregion
#region Private Properties
private bool _isParentRecordTabVisible = true;
private bool _isAdditionalInfoTabVisible;
private ObservableCollection<TabViewModel> _tabs { get; set; }
#endregion
#region Public Properties
public bool IsParentRecordTabVisible
{
get => _isParentRecordTabVisible;
set { _isParentRecordTabVisible = value; OnPropertyChanged(nameof(IsParentRecordTabVisible)); }
}
public bool IsAdditionalInfoTabVisible
{
get => _isAdditionalInfoTabVisible;
set { _isAdditionalInfoTabVisible = value; OnPropertyChanged(nameof(IsAdditionalInfoTabVisible)); }
}
public ObservableCollection<TabViewModel> Tabs
{
get => _tabs;
set { _tabs = value; OnPropertyChanged(nameof(Tabs)); }
}
#endregion
#region Commands
public ICommand TabChangedCommand { get { return new Command<TabViewModel>(ChangeTabClick); } }
#endregion
#region Private Methods
private void GetTabs()
{
Tabs = new ObservableCollection<TabViewModel>();
Tabs.Add(new TabViewModel { TabId = 1, IsSelected = true, TabTitle = "Parent record" });
Tabs.Add(new TabViewModel { TabId = 2, TabTitle = "Additional Info" });
Tabs.Add(new TabViewModel { TabId = 3, TabTitle = "Contacts" });
Tabs.Add(new TabViewModel { TabId = 4, TabTitle = "Previous inspections" });
Tabs.Add(new TabViewModel { TabId = 5, TabTitle = "Attachments" });
SelectedTab = Tabs.FirstOrDefault();
}
private void ChangeTabClick(TabViewModel tab)
{
try
{
var tabs = new ObservableCollection<TabViewModel>(Tabs);
foreach (var item in tabs)
{
if (item.TabId == tab.TabId)
{
item.IsSelected = true;
}
else
{
item.IsSelected = false;
}
}
Tabs.Clear();
Tabs = new ObservableCollection<TabViewModel>(tabs);
switch (tab.TabId)
{
case 1:
IsParentRecordTabVisible = true;
IsAdditionalInfoTabVisible = false;
break;
case 2:
IsParentRecordTabVisible = false;
IsAdditionalInfoTabVisible = true;
break;
}
}
catch (Exception ex)
{
Debug.WriteLine(ex.Message);
}
}
#endregion
}
}
#ParentTabView.xaml
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="poc_maui.Views.SubViews.ParentTabView">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
<Label
Text="Welcome to Parent tab!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</StackLayout>
</ContentView>
#AdditionalInfoTabView.xaml
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="poc_maui.Views.SubViews.AdditionalInfoTabView">
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" >
<Label
Text="Welcome to Additiona info tab!"
VerticalOptions="Center"
HorizontalOptions="Center" />
</StackLayout>
</ContentView>
So what happens here in Android is when I'm clicking AdditionalInfo Tab then it will show a blank white screen and if you press the hardware back button and open the app again it will show AdditionalTab as selected and its views content as well.
If I remove switch() code part from the ViewModel then it will work fine but tabs will not change. Does anyone have idea about this kind of behavior of scroll view in MAUI?
The full source code is here: maui_sample
Does this work-around fix it?
MainPage.xaml:
<ScrollView x:Name "theScrollView" ... >
MainPage.xaml.cs:
public MainPage()
{
InitializeComponent();
MessagingCenter.Subscribe<MainPageViewModel>(this, "update", (sender) =>
{
// Tell theScrollView to re-layout its contents.
(theScrollView as IView).InvalidateArrange();
});
}
MainPageViewModel:
private void ChangeTabClick(TabViewModel tab)
{
... make changes ...
MessagingCenter.Send<MainPageViewModel>(this, "update");
}
MAYBE:
I'm not sure if MessagingCenter Subscribe is on Dispatcher (Main) thread. To be reliable, do:
MessagingCenter.Subscribe<MainPageViewModel>(this, "update", (sender) =>
{
Dispatcher.Dispatch( () =>
{
(theScrollView as IView).InvalidateArrange();
});
}
UPDATE
There are other Maui bugs, that have a common "theme": Maui on Android does "something" related to layout only once - at the time the page is first drawn. UNFORTUNATELY, anything that is "not visible" at that time, is skipped. And won't work when later made visible.
Until such bugs are fixed, you'll have to do some work-around.
WORK-AROUND #1:
Start with ALL tabs IsVisible="True".
As soon as the page has been drawn the first time, in code-behind, create the desired Bindings on those IsVisible properties. Page drawn first time can be intercepted in a custom handler. But this is a temp work-around, so its easier to just run a method after a 250 ms delay. Use a boolean "flag" to make the method only run the first time.
Might have to do InvalidateArrange as shown above, to force the Bindings to function the first time.
OR WORK-AROUND #2:
Each time tab changes, use shell route to go to MainPage again. Keep same view model, so knows which tab to show first (and remembers any other state you care about).
Both of these are ugly.
I recommend creating an issue at .Net Maui github, and providing link to your github sample.
This is still not works for me properly but after looking at below two links I found that it it not what we are looking for. The Isvisible : false first and then on switch or check box change you are trying to make it visible then it will not visible but the actual control visible. So on look after I have see this link but again the answer is not what I was looking for.
Step to resolve.
On View use the Parent as ScrollView or control belongs to IView,IElement.
<ScrollView x:Name "myScrollView">
.....
...
Add Action on ViewModel
public delegate void Action(T obj);
Invoke the Action
Note: Make sure you call this on require not all the time.
e.g. On Visibility set in ViewModel call after visibility update.
MeasureAction?.Invoke("reSetVisibility");
Now on View's Code File, use Viewmodel and accept the invoke
Here Call the below line will works perfectly.
(myScrollView as IView).InvalidateMeasure();
That's IT... Enjoy IsVisible now and make your layout as require.
I'm trying to implement Drag & Drop with files on a ListBox which is contained in a Window of an Avalonia project.
As I couldn't get it working and I thought that ListBox perhaps is a special case, I tried to make a similar example like the one from ControlCatalogStandalone.
While the code in ControlCatalogStandalone works as expected, virtually the same code in my test application doesn't work properly.
The relevant code in ControlCatalogStandalone belongs to a UserControl, where in my application it belongs to the MainWindow. Could this be the cause for the misbehavior?
I created a new Avalonia MVVM Application based on the NuGet packages 0.9.11 in Visual Studio 2019.
I also tried version 0.10.0-preview2 in vain.
This is the XAML file:
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm="clr-namespace:DragAndDropTests.ViewModels;assembly=DragAndDropTests"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Width="400" Height="200"
x:Class="DragAndDropTests.Views.MainWindow"
Icon="/Assets/avalonia-logo.ico"
Title="DragAndDropTests">
<Design.DataContext>
<vm:MainWindowViewModel/>
</Design.DataContext>
<StackPanel Orientation="Vertical" Spacing="4">
<TextBlock Classes="h1">Drag+Drop</TextBlock>
<TextBlock Classes="h2">Example of Drag+Drop capabilities</TextBlock>
<StackPanel Orientation="Horizontal"
Margin="0,16,0,0"
HorizontalAlignment="Center"
Spacing="16">
<Border BorderBrush="{DynamicResource ThemeAccentBrush}" BorderThickness="2" Padding="16" Name="DragMe">
<TextBlock Name="DragState">Drag Me</TextBlock>
</Border>
<Border Background="{DynamicResource ThemeAccentBrush2}" Padding="16"
DragDrop.AllowDrop="True">
<TextBlock Name="DropState">Drop some text or files here</TextBlock>
</Border>
</StackPanel>
</StackPanel>
</Window>
And this is the Code Behind:
using Avalonia;
using Avalonia.Controls;
using Avalonia.Input;
using Avalonia.Markup.Xaml;
using System;
using System.Diagnostics;
namespace DragAndDropTests.Views
{
public class MainWindow : Window
{
private TextBlock _DropState;
private TextBlock _DragState;
private Border _DragMe;
private int DragCount = 0;
public MainWindow()
{
Debug.WriteLine("MainWindow");
InitializeComponent();
#if DEBUG
this.AttachDevTools();
#endif
_DragMe.PointerPressed += DoDrag;
AddHandler(DragDrop.DropEvent, Drop);
AddHandler(DragDrop.DragOverEvent, DragOver);
}
private async void DoDrag(object sender, Avalonia.Input.PointerPressedEventArgs e)
{
Debug.WriteLine("DoDrag");
DataObject dragData = new DataObject();
dragData.Set(DataFormats.Text, $"You have dragged text {++DragCount} times");
var result = await DragDrop.DoDragDrop(e, dragData, DragDropEffects.Copy);
switch (result)
{
case DragDropEffects.Copy:
_DragState.Text = "The text was copied"; break;
case DragDropEffects.Link:
_DragState.Text = "The text was linked"; break;
case DragDropEffects.None:
_DragState.Text = "The drag operation was canceled"; break;
}
}
private void DragOver(object sender, DragEventArgs e)
{
Debug.WriteLine("DragOver");
// Only allow Copy or Link as Drop Operations.
e.DragEffects = e.DragEffects & (DragDropEffects.Copy | DragDropEffects.Link);
// Only allow if the dragged data contains text or filenames.
if (!e.Data.Contains(DataFormats.Text) && !e.Data.Contains(DataFormats.FileNames))
e.DragEffects = DragDropEffects.None;
}
private void Drop(object sender, DragEventArgs e)
{
Debug.WriteLine("Drop");
if (e.Data.Contains(DataFormats.Text))
_DropState.Text = e.Data.GetText();
else if (e.Data.Contains(DataFormats.FileNames))
_DropState.Text = string.Join(Environment.NewLine, e.Data.GetFileNames());
}
private void InitializeComponent()
{
Debug.WriteLine("InitializeComponent");
AvaloniaXamlLoader.Load(this);
_DropState = this.Find<TextBlock>("DropState");
_DragState = this.Find<TextBlock>("DragState");
_DragMe = this.Find<Border>("DragMe");
}
}
}
Drag & Drop within the application works well in ControlCatalogStandalone and in my application.
The succession of events is DoDrag, DragOver, DragOver, …, Drop in this case.
Dragging a file from Windows Explorer to the ControlCatalogStandalone works well.
The succession of events is DragOver, DragOver, …, Drop
Dragging a file from Windows Explorer to my application doesn't work.
None of the expected events is called here.
What's wrong with my test application?
I am developing an app using Xamarin, and currently trying to display the screen width to the (I later plan to base sizes of certain objects off this)
I am attempting to use bindings to do this, but unfortunately it doesn't appear to work as expected. It does not throw an exception, just the label that I am attempting to bind has no text value.
I am sure I will be using bindings quite a lot during the rest of the project, so I would be greatly appreciative of any advice.
Please consider the following code:
C#:
using Xamarin.Forms;
using XLabs.Ioc;
using XLabs.Platform.Device;
namespace TimerStyles
{
public partial class SavedTimesPage : ContentPage
{
string screenWidthText = "";
public SavedTimesPage()
{
InitializeComponent();
this.screenWidth = getScreenWidth();
}
public string screenWidth
{
protected set
{
screenWidthText = value;
}
get { return screenWidthText; }
}
public string getScreenWidth()
{
var dev = Resolver.Resolve<IDevice>();
var display = dev.Display;
double ScreenWidthInches = (double)display.Width / display.Xdpi;
var ScreenWidth = (ScreenWidthInches.ToString());
return ScreenWidth;
}
public string getScreenHeight()
{
var dev = Resolver.Resolve<IDevice>();
var display = dev.Display;
double ScreenHeightInches = (double)display.Height / display.Ydpi;
var ScreenHeight = (ScreenHeightInches.ToString());
return ScreenHeight;
}
}
}
Xaml:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:TimerStyles="clr-namespace:TimerStyles;assembly=TimerStyles"
x:Class="TimerStyles.SavedTimesPage"
NavigationPage.HasNavigationBar="false">
<ContentPage.Content>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="#232224">
<Label Text="x" TextColor="Blue" FontSize="Large"/>
<Label Text="{Binding screenWidth}" TextColor="Blue" FontSize="Large"/>
<Label Text="x" TextColor="Blue" FontSize="Large"/>
</StackLayout>
</ContentPage.Content>
</ContentPage>
This was solved by creating a "view-model" class to act as an intermediary between the view and the model, as per the following link:
https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-basics/data_bindings_to_mvvm/
(Obtained by following further on the link given in comments by cristallo)
Hopefully this will help anyone in the space-age future with the same issue.
I have been using Xamarin Forms to develop iOS and Android applications. I want to access a StackLayout that is within a TabbedPage so I can make it visible or hidden whenever the user changes tabs, but when I try to access the StackLayout I get "This does not exist in the current context". Here is my XAML code and my CS code.
CS
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace DebuggerTestAndroidIOS
{
public partial class PatientTabPage : TabbedPage
{
public PatientTabPage ()
{
InitializeComponent ();
ItemsSource = PatientDataModel.tabs;
//vitalSignsStack.IsVisible = true;
this.CurrentPageChanged += (object sender, EventArgs e) => {
var i = this.Children.IndexOf(this.CurrentPage);
System.Diagnostics.Debug.WriteLine("Page No:"+i);
if (i == 1){
vitalSignsStack.IsVisible = true;
}
};
}
}
}
XAML
<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="DebuggerTestAndroidIOS.PatientTabPage">
<TabbedPage.ItemTemplate>
<DataTemplate>
<ContentPage Title ="{Binding TabName}">
<!--Parent Wrapper layout-->
<StackLayout Orientation="Vertical" BackgroundColor="White">
<StackLayout x:Name="vitalSignsStack" Orientation="Horizontal" IsVisible="false">
<Image Source="VitalSigns.png" HorizontalOptions="Center"/>
</StackLayout>
</StackLayout><!--End parent wrapper-->
</ContentPage>
</DataTemplate>
</TabbedPage.ItemTemplate>
</TabbedPage>
An element is only going to be accesible within the context of the page that created it - in this case, the ContentPage.
If you want to reach it from outside of the ContentPage, you will need to add a public method or property to the ContentPage that exposes it.
You cannot access a control inside a DataTemplate with its name. The problem is, that it will be repeated and so this name would exist multiple times, what is not allowed.
But why don't you create a new Page like this:
public partial class PatientTabContentPage : TabbedPage
{
public PatientTabContentPage ()
{
InitializeComponent ();
}
public HideVitalSignsStack(bool true){
vitalSignsStack.IsVisible = true;
}
}
And change DataTemplate to
<DataTemplate>
<PatientTabContentPage Title ="{Binding TabName}">
</DataTemplate>
Then hide the stackpanel with
this.CurrentPageChanged += (object sender, EventArgs e) => {
var page = CurrentPage as PatientTabContentPage;
var i = this.Children.IndexOf(this.CurrentPage);
System.Diagnostics.Debug.WriteLine("Page No:"+i);
if (i == 1){
page.HideVvitalSignsStack(true);
}
};
Thanks for your efforts. I tried them, still was not able to access the StackLayouts. I modified a little bit my code, this helped a lot and made everything easier: Creating different layouts for each tab
Using an image inside of a viewbox (inside a DockPanel), I've created a image that scales with my window in a wpf application.
<Viewbox HorizontalAlignment="Left" Name="viewbox1" VerticalAlignment="Top" Stretch="Uniform" StretchDirection="UpOnly">
<Image Height="438" Name="image1" Stretch="Uniform" Width="277" Source="/MyAPP;component/Images/TicTacToeBoardForExample.png" MouseDown="image1_MouseDown" />
</Viewbox>
How can I make certain regions of the picture run different code when clicked?
I'm desiring to do this in such a fashion that no matter what size the image scales (upon window resizing), the exact regions desired, scale perfectly with the image so that, when clicked, it always triggers their corresponding code-to-be-run for that region.
Already an old question, but as I had a similar requirement, I implemented the suggestion from Terry and want to share it with you. I use 10x10 Buttons/regions.
The View:
<Grid>
<Image Stretch="Fill" Panel.ZIndex="1" Source="{Binding BitMapSource}" />
<ItemsControl Panel.ZIndex="2" ItemsSource="{Binding RectangleItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="10" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Opacity="0.3" Content="{Binding Tag}"></Button>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
The ViewModel:
public class MainWindowViewModel : PropertyChangedBase
{
public MainWindowViewModel()
{
InitRectangles();
}
public BitmapSource BitMapSource => new BitmapImage(new Uri(#"C:\tmp\images\plus.png"));
public ObservableCollection<RectangleItem> RectangleItems { get; set; }
private void InitRectangles()
{
RectangleItems = new ObservableCollection<RectangleItem>();
for (var i = 0; i < 10; i++)
{
for (var j = 0; j < 10; j++)
{
RectangleItems.Add(new RectangleItem
{
X = j * 10,
Y = i*10,
});
}
}
}
}
And the RectangleItem (Model)
public class RectangleItem
{
public string Tag => $"{X}, {Y}";
public double X { get; set; }
public double Y { get; set; }
}
Off memory you could do something like this:
public void image1_MouseDown(object sender, MouseEventArgs e)
{
var pos = e.GetPosition(viewbox1);
if (/* pos in range 1 */) DoTheThingInRange1();
else if (/*pos in range 2*/) DoTheThingInRange2();
else if (/*pos in range 3...*/) DoTheThingInRange3();
//so on...
}
HTH
Your exact requirement is not clear, But it would be helpful if you take a look at the TranslatePoint and PointToScreen methods on the FrameworkElement.
i once needed to do a similar thing.
What is did was put buttons over the image. Then u put their opacity to 0 or 3.0 or something, so that u don't see the buttons, but can still click them.
When properly added, the buttons can resize along with the image.