Блог

Я новичок в Xamarin.Я решил, что моим первым проектом будет приложение для фитнеса.Я хотел иметь пользовательский элемент управления , изображение с кнопкой и меткой внутри , поэтому я сделал это в файле представления содержимого:

 lt;ContentView xmlns="http://xamarin.com/schemas/2014/forms"   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  x:Class="Fitness_App.TabWorkout"gt;  lt;RelativeLayout gt;  lt;Image x:Name="img" Source="workout"/gt;  lt;Button BackgroundColor= "Wheat"  CornerRadius="30"  WidthRequest="50"  HeightRequest="50"  RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Width, Factor=0.68}"  RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Height, Factor=0.45}"/gt;  lt;Label x:Name="workout_name"  FontFamily="BebasNeue"  TextColor ="ForestGreen"  FontSize="37"  RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Width, Factor=0.18}"  RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img, Property=Height, Factor=0.2}"/gt;    lt;/RelativeLayoutgt;  lt;/ContentViewgt;  

И так как я хочу 5 тренировок(для 5 групп мышц) , я поместил это на свою страницу:

 lt;ContentPage.Contentgt;  lt;ScrollViewgt;  lt;StackLayoutgt;  lt;local:TabWorkout/gt;  lt;local:TabWorkout/gt;  lt;local:TabWorkout/gt;  lt;local:TabWorkout/gt;  lt;local:TabWorkout/gt;  lt;/StackLayoutgt;  lt;/ScrollViewgt;  lt;/ContentPage.Contentgt;  

и вот как это выглядит: симулятор для Android Я читал о связываемых свойствах, но не знаю, как они помогут мне в этом случае.Я не знаю, почему ширина моего изображения не полная.Когда я только что разместил изображения в своем стеке , это, казалось, сработало.Может быть, у вас, ребята, есть другая идея на этот счет?Спасибо.

Я читал о связываемых свойствах, но не знаю, как они помогут мне в этом случае.

Здесь мы добавляем связываемое свойство для элемента Image управления таким же образом , как и для Label .

1. Определите BindableProperty в пользовательском элементе управления .
2. Установите источник изображения в propertyChanged режиме обратного вызова .
3. Назначьте значение в xaml .

    [XamlCompilation(XamlCompilationOptions.Compile)]  public partial class TabWorkout : ContentView  {  public TabWorkout()  {  InitializeComponent();  }   public static readonly BindableProperty ImageNameProperty =  BindableProperty.Create("ImageName", typeof(string), typeof(TabWorkout), propertyChanged: OnEventNameChanged);   public string ImageName  {  get { return (string)GetValue(ImageNameProperty); }  set {  SetValue(ImageNameProperty, value);  }   }   static void OnEventNameChanged(BindableObject bindable, object oldValue, object newValue)  {  if(newValue != null)  {  var control = (TabWorkout)bindable;  control.img.Source = ImageSource.FromFile(newValue as string);  }  }  }  

    lt;ScrollViewgt;  lt;StackLayoutgt;  lt;local:TabWorkout ImageName="a.jpg"/gt;  lt;local:TabWorkout ImageName="b.png"/gt;  lt;local:TabWorkout ImageName="c.png"/gt;  lt;local:TabWorkout ImageName="d.png"/gt;  lt;/StackLayoutgt;  lt;/ScrollViewgt;  

Я не знаю, почему ширина моего изображения не полная.

Установите Aspect значение Fill должно быть в состоянии решить проблему .

 lt;Image x:Name="img" Aspect="Fill"/gt;  

Обновить

Для привязываемого свойства вы можете не только присвоить значение напрямую , как в обычном поле свойства, но и создать привязку к нему .

 lt;ScrollViewgt;  lt;StackLayoutgt;  lt;local:TabWorkout ImageName="{Binding ImageName}"/gt;  lt;local:TabWorkout ImageName="a.jpg"/gt;  lt;/StackLayoutgt; lt;/ScrollViewgt;