C# 如何将图像绑定到嵌套图像的网格具有不同绑定上下文的列表？_C#_Xamarin_Xamarin.forms

C# 如何将图像绑定到嵌套图像的网格具有不同绑定上下文的列表？

c# xamarin xamarin.forms

C# 如何将图像绑定到嵌套图像的网格具有不同绑定上下文的列表？,c#,xamarin,xamarin.forms,C#,Xamarin,Xamarin.forms,我目前正在处理通过viewmodel绑定的列表，然后是一个服务。在列表中，我绑定了一个图像和一个标签。我可以成功地将标签绑定，但图像不显示。这样做的原因似乎是因为我在嵌套图像的网格中更改了bindingcontext。我更改bindingcontext以获得图像的准确宽度 <Grid.RowDefinitions> <RowDefinition Height="8*" />

我目前正在处理通过viewmodel绑定的列表，然后是一个服务。在列表中，我绑定了一个图像和一个标签。我可以成功地将标签绑定，但图像不显示。这样做的原因似乎是因为我在嵌套图像的网格中更改了bindingcontext。我更改bindingcontext以获得图像的准确宽度

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

如果我将图像移到网格之外，它就会显示出来，所以现在我正尝试重新整理bindingcontext

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

我试图用这个图像添加一个新的bindingcontext

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

BindingContext=“{x:Reference Name=gridFollowers}”Source=“{Binding image}”

其中

gridFollowers

是我将原始绑定的stacklayout命名为的，但不幸的是，图像仍然没有显示

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

以下是完整的代码：

             <StackLayout x:Name="gridFollowers"
             BindableLayout.ItemsSource="{Binding headerService.CurrentHeader}">
             <BindableLayout.ItemTemplate >
             <DataTemplate>
                <Grid WidthRequest="75">

                <Grid.RowDefinitions>
                   <RowDefinition Height="8*" />
                   <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                     Grid.Row="0"
                     Grid.Column="0"
                     BindingContext="{x:Reference Name=headerImage}"
                     WidthRequest="{Binding Height}">

                     <ffimageloading:CachedImage
                      x:Name="headerImage" BindingContext="{x:Reference Name=gridFollowers}"
                      Source="{Binding image}" />
                </Grid>

                <Label Grid.Row="1" Grid.Column="0"
                       Text="{Binding firstname}" />

             </DataTemplate>
             </BindableLayout.ItemTemplate>
             </StackLayout>

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

如何使其如图所示？

我尝试了您的代码并修改了一些代码，如下所示，请替换您的代码

 <Grid
                        Grid.Row="0"
                        Grid.Column="0"
                        WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                        <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                    </Grid>

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

更新：

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

请检查headerService.CurrentHeader数据

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

请检查是否通过代码隐藏将viewmodel绑定到page.cs bindingcontext

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}

                <Grid.RowDefinitions>
                    <RowDefinition Height="8*" />
                    <RowDefinition Height="2*" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="7.5*" />
                </Grid.ColumnDefinitions>

                <Grid
                    Grid.Row="0"
                    Grid.Column="0"
                    WidthRequest="{Binding Height, Source={x:Reference headerImage}}">
                    <ffimageloading:CachedImage x:Name="headerImage" Source="{Binding image}" />
                </Grid>

                <Label
                    Grid.Row="1"
                    Grid.Column="0"
                    Text="{Binding firstname}" />
            </Grid>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

 public partial class Page8 : ContentPage
 {

public ObservableCollection<imagemodel> models { get; set; }
public Page8 ()
{
    InitializeComponent ();

    models = new ObservableCollection<imagemodel>()
    {
        new imagemodel(){firstname="first image", image="a1.jpg"},
        new imagemodel(){firstname="second image",image="a2.jpg"}
    };
    this.BindingContext = this;
}
 }

public class imagemodel
{
public string firstname { get; set; }
public string image { get; set; }
}


公共部分类第8页：内容页
{
公共可观测集合模型{get；set；}
公共页8（）
{
初始化组件（）；
模型=新的ObservableCollection（）
{
新的imagemodel（）{firstname=“first image”，image=“a1.jpg”}，
新建imagemodel（）{firstname=“second image”，image=“a2.jpg”}
};
this.BindingContext=this；
}
}
公共类图像模型
{
公共字符串名{get；set；}
公共字符串图像{get；set；}
}

当我改为that@Carlos，太奇怪了，我已经发布了整个示例，请看一下更新。我会检查它，1因为我很难让它正常工作。如果我把它放在网格外，它就会显示（imaeg）。真奇怪？卡洛斯，你试过我的密码吗？我没有任何问题，图像显示成功，我认为这与网格无关。