Hello I am slowly working on an application to control my home automation - I am looking to allow the user to change the items that will be available.
I need to CRUD controls dynamically as the user interacts with the Form so that initially a StackLayout has only a button but allows the user to change the cell/widget to be a NEW widget to control 1 or more items in the house. Below is a mockup screenshot of this using a single light switch as an example seems I cannot post screenshots, I also have a widget for seeing RTSP streams from POE cameras, a widget for monitoring items like doors, etc., Basically the sky is the limit. I am adding a snippet of my test xaml below ... I am still playing with sizes and layouts but any attempts so far seem hackish and want to get the best may to tackle this.
Questions?
1. I am having trouble setting a x:Name to the dynamic controls and am asking if this is a Bug? if not why ?
2. I was trying to set a Name to the Button controls in code so when it is clicked so I would try and determine the correct REST call yo make. Is there another way to achieve this without a name for the controls?
3. Is there a better way to do want I am trying to do? I started to look at FlexLayout but that did not seem right either.
4. Is there are alternative to having to use StackLayouts to get my layout set?
5. I just read a search online were the guys said to add all the control to the Layout and then turn the Visibility on or off to get the desired look as the user selects a new layout. This seems VERY odd is this really a good way to statically have controls in xaml?
Thank you in advance.
Brad
<StackLayout HorizontalOptions="StartAndExpand" VerticalOptions="Start" >
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Horizontal">
<StackLayout Orientation="Vertical" >
<Frame x:Name="A" CornerRadius="5" HasShadow="True" BorderColor="Black" IsVisible="True" Margin="5" Padding="5" >
<StackLayout Orientation="Horizontal" >
<StackLayout Orientation="Vertical" HeightRequest="200" >
<Label Text="Webcam Porch" />
<Image x:Name="webcam" Margin="0, -120, 0, 0" Source="{Binding WebImage}" WidthRequest="300" HeightRequest="400" />
</StackLayout>
</StackLayout>
</Frame>
<StackLayout Orientation="Vertical" >
<Frame CornerRadius="5" HasShadow="True" BorderColor="Black" IsVisible="True" WidthRequest="125" HeightRequest="75" Margin="5" Padding="5" >
<StackLayout Orientation="Horizontal" >
<StackLayout Orientation="Vertical" >
<Image Source="switch_off.png" WidthRequest="60" HeightRequest="60" Margin="0,1,0,0" />
</StackLayout>
<StackLayout Orientation="Vertical" >
<Button Text="On" BorderRadius="2" WidthRequest="60" HeightRequest="33" Margin="-5,0,0,0" Padding="0,0,0,0" />
<Button Text="Off" BorderRadius="2" WidthRequest="60" HeightRequest="33" Margin="-5,-10,0,0" Padding="0,0,0,0" />
</StackLayout>
</StackLayout>
</Frame>
<Frame CornerRadius="5" HasShadow="True" BorderColor="Black" IsVisible="True" WidthRequest="125" HeightRequest="75" Margin="5" Padding="5" >
<StackLayout Orientation="Horizontal" >
<StackLayout Orientation="Vertical" >
<Image Source="switch_off.png" WidthRequest="60" HeightRequest="60" Margin="0,1,0,0" />
</StackLayout>
<StackLayout Orientation="Vertical" >
<Button Text="On" BorderRadius="2" WidthRequest="60" HeightRequest="33" Margin="-5,0,0,0" Padding="0,0,0,0" />
<Button Text="Off" BorderRadius="2" WidthRequest="60" HeightRequest="33" Margin="-5,-10,0,0" Padding="0,0,0,0" />
</StackLayout>
</StackLayout>
</Frame>
<Frame CornerRadius="5" HasShadow="True" BorderColor="Black" IsVisible="True" WidthRequest="125" HeightRequest="75" Margin="5" Padding="5" >
<StackLayout Orientation="Horizontal" >
<StackLayout Orientation="Vertical" >
<Image Source="switch_off.png" WidthRequest="60" HeightRequest="60" Margin="0,1,0,0" />
</StackLayout>
<StackLayout Orientation="Vertical" >
<Button Text="On" BorderRadius="2" WidthRequest="60" HeightRequest="33" Margin="-5,0,0,0" Padding="0,0,0,0" />
<Button Text="Off" BorderRadius="2" WidthRequest="60" HeightRequest="33" Margin="-5,-10,0,0" Padding="0,0,0,0" />
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</StackLayout>