windows phone 8.1 错误 "The name '' does not exist in the current context"

flipview on windows phone 8.1 error "The name '' does not exist in the current context"

我有一个包含照片、descbox、detailBtn、hideBtn 的翻转视图。我想如果点击照片,然后 descbox 和 hideBtn 出现,而​​ detailBtn 不出现。如果再次点击照片,则 descbox 和 hideBtn 不会出现,而 detailBtn 会出现。 或者,如果单击 detailBtn,则会出现 descbox 和 hideBtn,而不会出现 detailBtn。如果点击 hideBtn,则 descbox 和 hideBtn 不会出现,而 detailBtn 会出现。

我正在使用以下代码:

private async void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)
        {                
            var item = await NatureDataSource.GetItemAsync((String)e.NavigationParameter);
        var group = await NatureDataSource.GetGroupByItemAsync(item);
        this.DefaultViewModel["Group"] = group;
        this.DefaultViewModel["Item"] = item;
        }

 public bool _IsOn;
        public bool IsOn
        {
            get
            {
                return _IsOn;
            }
            set
            {
                _IsOn = value;
            }
        }

        private void photo_Tapped(object sender, TappedRoutedEventArgs e)
        {
            IsOn = !IsOn;
            if (!IsOn)
            {
                descbox.Visibility = Visibility.Collapsed;
                detailBtn.Visibility = Visibility.Visible;
                hideBtn.Visibility = Visibility.Collapsed;
            }
            else
            {
                descbox.Visibility = Visibility.Visible;
                detailBtn.Visibility = Visibility.Collapsed;
                hideBtn.Visibility = Visibility.Visible;
            }
        }

private void detailBtn_Tapped(object sender, TappedRoutedEventArgs e)
        {
            descbox.Visibility = Visibility.Visible;
            detailBtn.Visibility = Visibility.Collapsed;
            hideBtn.Visibility = Visibility.Visible;
        }

但出现如下错误信息:

XAML:

<FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}" Foreground="{x:Null}">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid x:Name="ContentRoot">
                        <Grid.ChildrenTransitions>
                            <TransitionCollection>
                                <EdgeUIThemeTransition Edge="Left"/>
                            </TransitionCollection>
                        </Grid.ChildrenTransitions>
                        <ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto">
                            <StackPanel Height="325" Width="558">
                                <Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0" />
                                <Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="Collapsed" Margin="0,-120,0,0">
                                    <ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible">
                                        <StackPanel Width="538">
                                            <TextBlock x:Name="desc" Text="{Binding Description}" FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" Height="auto"/>
                                        </StackPanel>
                                    </ScrollViewer>
                                </Border>
                                <Image x:Name="detailBtn" Source="images/media/arrow_up.png" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Tapped="detailBtn_Tapped"/>
                                <Image x:Name="hideBtn" Source="images/media/arrow_down.png" Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="Collapsed" Tapped="hideBtn_Tapped"/>
                            </StackPanel>
                        </ScrollViewer>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

如何处理?

注意: 我尝试使用中的方式,但是在windowsphone8.1上无法使用

您收到错误 "descbox" 并且其他错误在当前上下文中不存在,因为它们是数据模板的 UIElements 部分的名称。 dataTemplate 只会在运行时加载。您想要实现的目标可以通过数据绑定和 MVVM 概念轻松实现。

我已经根据您在问题中使用数据绑定提供的数据为您创建了一个解决方案。我已经跳过了 MVVM 部分,因为它足够大,可以作为答案。那么开始吧...

更新后XAML

根据您的代码项目,您可以通过为按钮添加 DataBinding 来更改一些内容。如下所示:

<FlipView x:Name="narrowFlipview" Grid.Row="1" ItemsSource="{Binding Group.Items}" SelectedItem="{Binding Item, Mode=TwoWay}"  Foreground="{x:Null}">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <Grid x:Name="ContentRoot">
                    <Grid.ChildrenTransitions>
                        <TransitionCollection>
                            <EdgeUIThemeTransition Edge="Left"/>
                        </TransitionCollection>
                    </Grid.ChildrenTransitions>
                    <ScrollViewer x:Name="myScroll" VerticalScrollBarVisibility="Auto" Margin="0,0,0,0" VerticalScrollMode="Auto" HorizontalScrollBarVisibility="Auto" ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollMode="Auto">
                        <StackPanel Height="325" Width="558">
                            <Image x:Name="photo" Source="{Binding ImagePath}" Stretch="Uniform" Height="320" Tapped="photo_Tapped" Margin="0,0,0.333,0" />
                            <Border x:Name="descbox" Background="#A52C2C2C" Height="120" VerticalAlignment="Bottom" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Margin="0,-120,0,0">
                                <ScrollViewer VerticalScrollMode="Auto" Height="auto" HorizontalScrollBarVisibility="Visible">
                                    <StackPanel Width="538">
                                        <TextBlock x:Name="desc" Text="{Binding Description}"  FontFamily="verdana" FontSize="17" Foreground="#CCFFFFFF" TextWrapping="Wrap" Padding="0,10" TextAlignment="Justify" Height="auto"/>
                                    </StackPanel>
                                </ScrollViewer>
                            </Border>
                            <AppBarButton x:Name="detailBtn" Icon="Upload" Margin="0,-40,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToInverseVisibilityConverter}}" Click="DetailsBtn_Click"/>
                            <AppBarButton x:Name="hideBtn" Icon="Download"  Margin="0,-285,0,0" Height="40" Width="40" HorizontalAlignment="Right" Visibility="{Binding IsDescriptionVisible,Converter={StaticResource boolToVisibilityConverter}}" Click="HideBtn_Click"/>
                        </StackPanel>
                    </ScrollViewer>
                </Grid>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

注意:有 UI 失败,因为页边距不正确,但这就是您的代码。尽量不要使用 Margins 来适应布局。你可以参考我的回答了解更多详情。

同样的代码背后:

我已经更改了触发点击事件时要执行的操作。出于参考原因,我已经对您的代码进行了评论。代码变化如下:

    private void photo_Tapped(object sender, TappedRoutedEventArgs e)
    {
        var currentItem = narrowFlipview.SelectedItem as WaterfallDataItem;
        currentItem.IsDataVisible = !currentItem.IsDataVisible;
        //IsOn = !IsOn;
        //if (!IsOn)
        //{
        //    descbox.Visibility = Visibility.Collapsed;
        //    detailBtn.Visibility = Visibility.Visible;
        //    hideBtn.Visibility = Visibility.Collapsed;
        //}
        //else
        //{
        //    descbox.Visibility = Visibility.Visible;
        //    detailBtn.Visibility = Visibility.Collapsed;
        //    hideBtn.Visibility = Visibility.Visible;
        //}
    }



    private void DetailsBtn_Click(object sender, RoutedEventArgs e)
    {
        var currentItem = narrowFlipview.SelectedItem as WaterfallDataItem;
        currentItem.IsDescriptionVisible = true;
    }

    private void HideBtn_Click(object sender, RoutedEventArgs e)
    {
        var currentItem = narrowFlipview.SelectedItem as WaterfallDataItem;
        currentItem.IsDescriptionVisible = false;
    }

WaterfallDataItem Class 更改:

我添加了接口 INotifyPropertyChanged 并添加了两个新属性 IsDataVisibleIsDescriptionVisible,它们会引发 PropertyChanged 事件,以防它们被更改。

 public class WaterfallDataItem:INotifyPropertyChanged
{
    public WaterfallDataItem(String uniqueId, String title, String imagePath, String description, String content)
    {
        this.UniqueId = uniqueId;
        this.Title = title;
        this.Description = description;
        this.ImagePath = imagePath;
        this.Content = content;
    }

    public string UniqueId { get; private set; }
    public string Title { get; private set; }
    public string Description { get; private set; }
    public string ImagePath { get; private set; }
    public string Content { get; private set; }

    //for the image tap to show description functionality
    private bool isDataVisible;
    public bool IsDataVisible
    {
        get { return isDataVisible; }
        set
        {
            isDataVisible = value;
            if (value)
                IsDescriptionVisible = true;
            RaisePropertyChanged("IsDataVisible");
        }
    }

    //for hide and show the details pannel and hide and show content based on that
    private bool isDescriptionVisible;
    public bool IsDescriptionVisible
    {
        get { return isDescriptionVisible; }
        set { isDescriptionVisible = value; RaisePropertyChanged("IsDescriptionVisible"); }
    }

    //raises the event to the view if any of these properties change
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    public override string ToString()
    {
        return this.Title;
    }
}

请注意:PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); 仅适用于 Visual Studio 2015 中可用的 C# 6.0。对于任何版本,您都必须使用

if (PropertyChanged != null)
{
    PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}

因为新的 Null Condition 运算符仅在 C# 6.0 中可用。有关 C# 6.0 中新增功能的更多信息,请参阅 this

转换器:

Converter 用于将 true 或 false 值从属性转换为可见性

 public class boolToVisibilityConverter : IValueConverter
{
    public bool isInverseReq { get; set; }
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        bool val = (bool)value;
        if(isInverseReq)
        {
            if (val)
                return Visibility.Collapsed;
            else
                return Visibility.Visible;
        }
        else
        {
            if (val)
                return Visibility.Visible;
            else
                return Visibility.Collapsed;
        }
    }

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

App.xaml

最后为了使转换器工作,我们需要将转换器添加到 app.xaml。修改 Application.Resources 如下:

<Application.Resources>
    <local:boolToVisibilityConverter x:Key="boolToVisibilityConverter" isInverseReq="False"/>
    <local:boolToVisibilityConverter x:Key="boolToInverseVisibilityConverter" isInverseReq="True"/>
</Application.Resources>

请注意所有 类 只是在主项目中没有子文件夹,因此如果您将 类 和转换器放在其他命名空间中,请记得更新 xmlns: xaml

上的标签

编辑:使您的解决方案有效:

至少您可以更改代码中的一些内容以使其工作,我已经在答案中进行了更改。上述更改可让您在不对代码进行太多更改的情况下实现功能。如果有任何遗漏,请告诉我。