[UWP]通过DataBinding将RelativePanel的高度/宽度设置为app高度/宽度 [英] [UWP]Set RelativePanel's height/width equal to app height/width through DataBinding

问题描述

你好！

我想设置我的RelativePanel的高度和宽度等于我的应用程序的高度和宽度（用户可以通过调整大小来改变）。

以下代码不起作用。我不知道为什么：

< Page Name：" page" ......> 
<网格名称：" grid"> 
< RelativePanel Width =" {Binding ElementName = page，Path = Width}"高度="{Binding ElementName = page，Path = Height}"> 
< / Grid> 
< / Page> 

我认为我可以使用任意元素名称（页面和网格），因为它们都会在调整应用程序大小时调整大小。但他们都没有返回所需的价值。

所以在看了一些论坛和Q& A网站之后，我试过了，

 
<页面名称：" page" ......> 
<网格名称：" grid"> 
< Grid.Resources> 
< local：rpanel_width_converter x：Key =" ConvertRPanelWidth" /> 
< local：rpanel_height_converter x：Key =" ConvertRPanelHeight" /> 
< /Grid.Resources> 
 
  &NBSP; &NBSP; < RelativePanel x：Name =" rpanel" Width =" {Binding Converter = {StaticResource ConvertRPanelWidth}}" Height =" {Binding Converter = {StaticResource ConvertRPanelHeight}}">▼如果我需要设置元素名称和更改属性的路径，还要触发：
 //   < RelativePanel x：Name =" rpanel" Width =" {Binding ElementName = page，Path = Width，Mode = OneWay，Converter = {StaticResource ConvertRPanelWidth}}" Height =" {Binding ElementName = page，Path = Height，Mode = OneWay，Converter = {StaticResource ConvertRPanelHeight}}"> 
< / Grid> 
< / Page> 
 

和C＃：

公共类rpanel_width_converter ：IValueConverter 
 {
公共对象转换（对象值，类型targetType，对象参数，字符串语言）
 {
 return Window.Current.Bounds.Width; 
} 
 
公共对象ConvertBack（对象值，类型targetType，对象参数，字符串语言）
 {
 throw new NotImplementedException（）; 
} 
} 
 
公共类rpanel_height_converter：IValueConverter 
 {
公共对象转换（对象值，类型targetType，对象参数，字符串语言）
 {
返回Window.Current.Bounds.Height; 
} 
 
公共对象ConvertBack（对象值，类型targetType，对象参数，字符串语言）
 {
 throw new NotImplementedException（）; 
} 
} 

但它也不起作用。

所以现在，我正在更新Page.SizeChanged事件下的rpanel.Width和height，但我只能在运行时看到它，而不是在Visual Studio中编辑设计器时。这就是为什么我真的想用DataBinding和XAML来做。我该怎么办？

谢谢！

< hr>

- Prateek Jain

解决方案

Hi Prateek.Jain，

欢迎来到开发通用Windows应用程序
论坛！

请阅读粘贴帖子，特别是
发布指南：主题行标签 和
Windows 10 SDK和工具的已知问题

>>但它没有也可以。

因为当你使用转换器时为了帮助你设置RelativePanel的高度/宽度等于app高度/宽度，它将一次工作一次，所以在页面改变它的大小后，它将不起作用。

如果你想要通过DataBinding将s et RelativePanel的高度/宽度等于app高度/宽度，请尝试参考以下示例：
$
在MainPage.xaml中：

< RelativePanel x：Name =" MyRelativePanel"背景= QUOT;红色" Width =" {Binding Width}"高度="{绑定高度}"> 
< / RelativePanel> 

在MainPage.xaml.cs中：

 public class ViewModel 
 {
 public double Width {get;组; } 
 public double Height {get;组; } 
 
} 
公共密封分部类MainPage：Page 
 {
 
 public MainPage（）
 {
 this.InitializeComponent （）; 
} 
 
 private void MyPage_SizeChanged（object sender，SizeChangedEventArgs e）
 {
 ViewModel test = new ViewModel（）; 
 test.Width = Window.Current.Bounds.Width; 
 test.Height = Window.Current.Bounds.Height; 
 MyRelativePanel.DataContext = test; 
 Debug.WriteLine（MyRelativePanel.Width）; 
 Debug.WriteLine（MyRelativePanel.Height）; 
} 
} 

最好的问候，

Amy Peng

Hello!

I want to set the height and width of my RelativePanel equal to that of my app (which the user can change by resizing).

The following code, does not work. I don't know why:

<Page Name:"page" ...... >
   <Grid name:"grid">
      <RelativePanel Width="{Binding ElementName=page, Path=Width}" Height="{Binding ElementName=page, Path=Height}">
   </Grid>
</Page>

I thought I can use either element names (page and grid) since they both get resized when the app is resized. But neither of them are returning the desired value.

So after seeing some forums and Q&A sites, I tried,

<Page Name:"page" ...... >
   <Grid name:"grid">
      <Grid.Resources>
         <local:rpanel_width_converter x:Key="ConvertRPanelWidth" />
         <local:rpanel_height_converter x:Key="ConvertRPanelHeight" />
      </Grid.Resources>
      <RelativePanel x:Name="rpanel" Width="{Binding Converter={StaticResource ConvertRPanelWidth}}" Height="{Binding Converter={StaticResource ConvertRPanelHeight}}">

//also tired this, in case I need to set an element name and path to changing property, to trigger:
//    <RelativePanel x:Name="rpanel" Width="{Binding ElementName=page, Path=Width, Mode=OneWay, Converter={StaticResource ConvertRPanelWidth}}" Height="{Binding ElementName=page, Path=Height, Mode=OneWay, Converter={StaticResource ConvertRPanelHeight}}">
   </Grid>
</Page>

and in C#:

    public class rpanel_width_converter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return Window.Current.Bounds.Width;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }

    public class rpanel_height_converter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return Window.Current.Bounds.Height;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }

But it didn't work either.

So for now, I'm updating rpanel.Width and height under Page.SizeChanged event, but I can only see that in runtime, not while editing the designer in Visual Studio. That's why I'd really like to do it with DataBinding and in XAML. How do I do it?

Thanks!

---

- Prateek Jain

解决方案

Hi Prateek.Jain,

Welcome to the Developing Universal Windows apps forum!

Please read the sticky posts, especially the Guide to posting: subject line tags and Known Issues for Windows 10 SDK and Tools

>>But it didn't work either.

Because when you use the converter to help you set the RelativePanel's height/width equal to app height/width, it will once work once, so after the page change its size, it will do not work.

If you want to set RelativePanel's height/width equal to app height/width through DataBinding, please try to refer to my following example:
In the MainPage.xaml:

<RelativePanel x:Name="MyRelativePanel" Background="Red" Width="{Binding Width}" Height="{Binding Height}">
</RelativePanel>

In the MainPage.xaml.cs:

 public class ViewModel
    {          
        public double Width { get; set; }
        public double Height { get; set; }

    }
    public sealed partial class MainPage : Page
    {
      
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void MyPage_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            ViewModel test = new ViewModel();
            test.Width = Window.Current.Bounds.Width;
            test.Height = Window.Current.Bounds.Height;
            MyRelativePanel.DataContext = test;
            Debug.WriteLine(MyRelativePanel.Width);
            Debug.WriteLine(MyRelativePanel.Height);
        }
    }

Best Regards,
Amy Peng

这篇关于[UWP]通过DataBinding将RelativePanel的高度/宽度设置为app高度/宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！